uniapp开发微信小程序中遇到的坑 image src属性动态绑定base64位图片不显示的问题

Alastor_L

于 2021-05-21 13:52:06 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序 vue javascript

5 篇文章

订阅专栏

本文讲述了如何通过替换图片Base64编码中的换行符和空格，确保前端展示正常。通过编码处理，解决了图片加载失败的问题，关键在于数据预处理步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="dataList" v-for="(item,index) in dataList" :key="item.id">
	<image  mode="left" :src="item.imagePng">
</view>

打印后将后台传过来的base64代码片段放到浏览器中是可以正常显示解析的，在dom树中查看确定src中写入了代码，那么原因就清楚了。

if(item.imagePng){
	item.imagePng = item.imagePng.replace(/[\r\n]/g, "")
}

遍历原数据的时候将图片代码片段中的回车空格全部去掉，
最后就可以正常显示了