local flutter asset image not showing in html widget

html image flutter dart assets

3,052

Solution 1

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

Solution 2

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

Solution 3

Try:

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

in other words:

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

3,052

Author by

mehdouch

Updated on December 16, 2022

Comments

mehdouch over 1 year
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 over 4 years

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

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 almost 4 years

@SumeetMourya did u find any solution?
Sumeet Mourya over 3 years

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