Flutter本地图片未在HTML小部件中显示

Question

Flutter本地图片未在HTML小部件中显示

4

我使用flutter_html来渲染HTML代码，目前它正常工作，但是在处理img标签时出现了问题。

当图片来自网络时，img标签可以正常工作，例如：

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

但是当它是一个本地资源图片文件时，它无法工作。注意：我可以像这样在Image小部件中使用相同的图像：

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

我正在模拟器和设备上进行测试，有哪些做法是不正确的？

谢谢您

- mehdouch

3个回答

1

似乎 webview_flutter 目前无法读取本地 CSS 或本地图片（jpg/png 文件）。我必须将其更改为内联 CSS 和 base64 图片，这样就可以完美运行。

内联 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

- hatted

1

尝试：

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

在其他词语中：

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

- Code Poet

我已经尝试过了，但它没有起作用，assets/images/logo_tst.png是在pubspec.yaml中声明的URL。 - mehdouch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mehdouch · Accepted Answer

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

在搜索了几天正确使用 img 标签的资源方式之后，我决定查看 Flutter_HTML 在 Github 上的源代码，然后我发现了这两行：

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

它可行了！！！

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