1、问题描述:
uniapp中image组件显示base64图片一直不显示,我用的是从 PC 端添加的 base64 图片 (image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+......),现在要在uniapp中显示,网上找了很多方法都无法展示;
<view>
<image :src="imageData" ></image>
</view>
2、解决办法
其实网上很多都说明原因了,就是因为uniapp把 src 里面的内容当作图像URL,而不是把它当作图片数据解析展示,
image.png
其实主要的原因还是 这个 base64 前面的 image/svg+xml;base64, 我仔细看了下面的博客,发现前缀有个 data: ,我想就是因为它了吧,然后加了下面的代码就可以显示了
mounted() {
// 要使用 data: 做前缀,防止把它当作图像数据URL
this.imageData = "data:" + this.imageData.replace(/[\r\n]/g,"");
},
然后就可以展示图片了
b14ed2852e8a702ff3905f1ea716e1f.jpg
3、data:image/png;base64, 说明
data: 表示这是一个数据URL。
image/png: 指定数据的MIME类型。我的图片是 svg 格式的,所以是 svg+xml;
base64: 指定数据的编码格式为base64。
3、参考博客
(https://blog.csdn.net/weixin_44768421/article/details/116717097)
4、补充内容
如果使用app进行webview调试出现了下面的问题:
image.png
那么有两种方法:
1、重新启动运行到 Android App 自定义基座;
2、第一步不行,就重启hbuilderX;