html 小部件中未显示本地 flutter 资产图像

Question

我正在使用 flutter_html 来呈现 html 代码，它运行良好，但我遇到了 img 标签的问题

img 标签在图像来自网络时效果很好：

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

但是当它是本地资产图像文件时它不起作用注意：我可以像这样在图像小部件中使用相同的图像：

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

但它不会在 html 代码中显示，我尝试了所有这些：

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">
''';

那我就叫它：

Html( data:htmlUrl),

而且它只显示 alt:

web-img1
web-img2
web-img3

我正在 Android 模拟器和设备上进行测试

我做错了什么？

谢谢

Answer 1

尝试：

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

换句话说：

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

Answer 2

我做到了！我找到了一个解决方案，但它并不明显，也没有在任何地方记录！

在搜索了几天使用带有 img 标签的资产的正确方法后，我决定查看 github 中 flutter_html 的源代码，我发现了这两行：

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

所以我尝试了这样的 img 标签：

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

顺便说一下，我的图像文件在 pubspec.yaml 中声明为

assets/images/logo_tst.png

成功了！！！

正如我所说，没有关于此的文档，我希望有人会添加它

Answer 3

似乎 webview_flutter 现在无法读取本地 CSS 或本地图像（jpg/png 文件）。我必须将其更改为内联 CSS 和 based64 图像，并且效果很好。

内联CSS:

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

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

内联 base64 图像：

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

要在 Mac 中将图像转换为 base64 图像，您可以运行在终端中执行以下命令。

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

html 小部件中未显示本地 flutter 资产图像

local flutter asset image not showing in html widget

html

assets

image

dart

flutter