[QUESTION] How to diaplay image in selectable HTMl?

[mine223]

I want to display image in selectable html but it is not render them. Rather it is showing blank instead of image.

[erickok]

Could you provide example html, example code, version number and a screenshot of the output you got?

[mine223]

Example HTML example html.txt

Sorry, Below code is rendering here. Therefore I attached the text file here

<h5><strong>We generally walk for shorter distance and take any transport for longer distance. In olden days bullock-carts, horse driven cart and boats were only means of transport for commuting from one place to another. These means are still used in villages to travel and transport things. Animals like donkeys, bulls, mules, camels, and asses are used to carry loads for longer distances.</strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Animal%20Transport.PNG?time=1536946700306" alt="" width="193" height="302" /></strong><br /><strong><span id="ezoic-pub-ad-placeholder-112"></span></strong><br /><br /><strong><span id="div-gpt-ad-educationwithfun_com-box-3-0" data-google-query-id="CMrOl5mO1ukCFQv7aAodpk0EuQ"></span></strong><br /><br /><br /><br /><br /><strong>The various means of Transport available are:</strong><br /><br /><strong>Land Transport<span id="ezoic-pub-ad-placeholder-114"></span></strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Types%20of%20land%20transport.PNG?time=1536946729040" alt="" width="562" height="78" /></strong><br /><br /><strong>Road Transport &ndash; Roads connect different villages, town and cities. The most common road vehicles include buses, trucks, motorcycles, scooter, rickshaw, car, vans and bicycles. &nbsp;Bus carries large number of passengers near about 50-60.</strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Road%20Transport.PNG?time=1536946774000" alt="" width="211" height="467" /></strong><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><strong>Rail Transport &ndash; Rail transport includes all transport over rails or tracks. This includes trains (both passenger as well as goods train), metro and trams. Rail transport carries more people or goods compared to road transport.</strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Rail%20Transport.PNG?time=1536946815281" alt="" width="230" height="527" /></strong><br /><br /><br /><br /><br /><strong>Air Transport &ndash;Air transport includes all transport through the air such as airplanes, helicopters. It is the fastest means of transport and connects all major cities. Air transport is expensive. It is possible to reach other country in few hours or a day through air transport. Hot air balloon and blimp is a flight technology used for pleasure rides. A rocket is a flying vehicle used for space exploration or airborne weapon.</strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Air%20Transport.PNG?time=1536946846777" alt="" width="221" height="362" /></strong><br /><br /><strong>Water Transport &ndash; Water transport includes boat, ship, steamer, yacht, submarines. Steamers and boats sail along big rivers and ships sail in the oceans and seas carrying passengers and goods from place to another. Water transport is slow as compared to road, rail or air transport.<span id="ezoic-pub-ad-placeholder-102"></span></strong><br /><br /><strong><span id="div-gpt-ad-educationwithfun_com-medrectangle-3-0" data-google-query-id="CPzwhaKO1ukCFeUdtwAdpz4LsQ"></span></strong><br /><br /><strong>A yacht is a medium-sized sailing boat used for private cruising, racing, or other noncommercial purposes.</strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Water%20Transport.PNG?time=1536946904365" alt="" width="194" height="430" /></strong><br /><br /><strong>Submarine - A submarine is a watercraft designed to operate completely underwater in the sea for long period. Submarines are most noticeable in navies and used for military purpose. However, they are also used by scientists to travel deep into the sea to study deep water sea life.</strong><br /><br /><strong><img role="presentation" src="https://cdn-0.educationwithfun.com/pluginfile.php/106/mod_page/intro/Submarine.PNG?time=1536946935379" alt="" width="299" height="169" /></strong><br /><br /><strong>Transport can also be grouped as personal or public.</strong><br /><br /><strong>Personal transport is owned by individual for personal use. Example: car, scooter, bicycle etc.</strong><br /><br /><strong>Public transport is owned by government or private body for general public. Example: bus, train, ship, taxi etc.</strong></h5>""";

Example Code

Container(
    width: double.maxFinite,
    child: SelectableHtml(
      data: sm,
    ),
  )

Flutter and Package Version Flutter: 2.3.0 flutter_html: ^2.1.5

Screenshot of the output (Web and Mobile) Web

Mobile

[getBoolean]

According to the flutter_html readme SelectableHtml has limited support due to this bug #38474. The fix was just merged a few days ago so hopefully SelectableHtml will get better support soon (once the bug fix gets released in a stable Flutter version)

[erickok]

Yes as per our readme:

The list of tags that can be rendered is significantly reduced. Key omissions include no support for images/video/audio, table, and ul/ol.

[mine223]

Sure.. Will check that out.. Please let me know if you add features for image in selectable html.

Thank you for your help. I will close this thread.

[JeremyMing]

According to the flutter_html readme SelectableHtml has limited support due to this bug #38474. The fix was just merged a few days ago so hopefully SelectableHtml will get better support soon (once the bug fix gets released in a stable Flutter version)

This problem seems to have been solved in flutter 2.5 @erickok

[erickok]

Do you mean Flutter 2.8? Though we probably do not want to depend on Flutter 2.8 right now as minimum target - it is very early.

[JeremyMing]

Do you mean Flutter 2.8? Though we probably do not want to depend on Flutter 2.8 right now as minimum target - it is very early.

got it,It was indeed fixed in 2.8，thank you for your reply

[azhansy]

I used flutter 2.8.1, image can't diaplay in SelectableHtml.

[wb14123]

Hi @erickok , is there anyway to only enable this feature for flutter >= 2.8 wile maintain the minimum target? Or a separate early release branch that contains this feature?