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

似乎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

Answer 3

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

在寻找了几天使用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

而且有效!!!

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

本地浮动资产图片未显示在html小部件中

3 个答案: