local flutter asset image not showing in html widget

Question

I am using flutter_html to render html code and it is working well but I am having a problem with img tag

The img tag work well when the image is from the web like this:

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

but it doesn't work when it's a local asset image file Note: I can use the same image in an Image widget like this:

Image.asset('assets/images/logo_tst.png'),

but it wont show in html code and I tried all these:

String htmlUrl = '''  
<img src="file:///storage/assets/images/logo_tst.png" alt="web-img1" >
<img src="file:///assets/images/logo_tst.png" alt="web-img2">
<img src="file:///images/logo_tst.png" alt="web-img3">
''';

then I call it:

Html( data:htmlUrl),

And it only shows the alt:

web-img1
web-img2
web-img3

I am testing on an Android emulator and a device

what Am I doing wrong?

Thank you

mehdouch · Accepted Answer · 2019-12-23 00:04:05Z

8

I did it! I have found a solution and it wasn't obvious and not documented anywhere!

after searching for days the right way to use assets with the img tag I have decided to take a look at the source code of flutter_html in github and I have found these two lines:

else if (node.attributes['src'].startsWith('asset:')) {
                  final assetPath = node.attributes['src'].replaceFirst('asset:', '');

so I tried the img tag like this:

<img src="asset:assets/images/logo_tst.png" alt="web-img2">

By the way my image file is declared in pubspec.yaml as

assets/images/logo_tst.png

And It worked !!!

As I said there is no documentation about this and I hope that someone will add it

answered Dec 23, 2019 at 0:04

mehdouch

4532 gold badges8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sumeet Mourya Over a year ago

I tried this, something has been happened, before used this I am able to see only the empty rectangle but now I can see the question mark. could you share some information about this type of issue. Because image is place at the same path assets/images/<image1>

Monika Patel Over a year ago

@SumeetMourya did u find any solution?

Sumeet Mourya Over a year ago

@MonikaPatel not yet, for now I used the base64 data for the image, as a temporary solution.

Sneg Over a year ago

Thank you! Been trying all the various combinations for an hour. This worked for me.

Code Poet · Accepted Answer · 2019-12-22 21:37:25Z

1

Try:

"file:///android_asset/flutter_assets/" + url

in other words:

"file:///android_asset/flutter_assets/assets/images/logo_tst.png"

answered Dec 22, 2019 at 21:37

Code Poet

8,2332 gold badges40 silver badges64 bronze badges

1 Comment

mehdouch Over a year ago

I have tried it and it didn't work and assets/images/logo_tst.png is the url as declared in pubspec.yaml

hatted · Accepted Answer · 2020-03-23 03:46:44Z

Seems like the webview_flutter cannot read local CSS or local images(jpg/png file) by now. I have to change it to inline CSS and based64 images and it works perfectly.

Inline CSS:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

Inline base64 images:

<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...">

To convert an image to base64 image in Mac, you can run the following command in Terminal.

openssl enc -base64 -in image.png -out image.b64

Collectives™ on Stack Overflow

local flutter asset image not showing in html widget

3 Answers 3

4 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Related