微信小程序图片无法显示时显示默认图片

本文介绍了在微信小程序中动态加载网络图片遇到的问题及其解决方案。首先,通过设置img标签的referrerPolicy属性为"no-referrer"解决图片无法显示的问题。然后,针对图片加载失败的情况,利用微信小程序的@error事件替代onerror属性来捕获错误,并显示默认图片。在处理过程中,需要注意直接修改遍历对象的属性以确保默认图片能正确显示。
摘要由CSDN通过智能技术生成

最近开发的项目是微信小程序,动态显示图片,遇到了一些问题

  1. 图片是从别的网站获取的网络图片,使用image标签无法正常显示
    解决方案: 使用原生img标签,添加属性referrerPolicy=“no-referrer”
<img referrerPolicy="no-referrer" :src="item.picPath" >

此时图片可以显示出来了

2.之后发现有几个图片一直加载失败,就让其显示自己设置的默认图片(微信小程序不管用)
解决方案:处理图片加载失败的问题,使用onerror事件捕捉图片加载错误,使用默认图片

<img  referrerPolicy="no-referrer"  :src="item.picPath"  onerror="οnerrοr=null;src='../../static/exam/b1.png'" ></img> 

注意: οnerrοr=null一定不能省略,否则不能实现效果

3.用h5测试onerror事件捕捉图片加载错误是正常的,但是如果使用微信小程序就会报错,我又去百度了一番

解决方案:微信小程序中img标签不支持onerror事件,使用@error方法
<img  referrerPolicy="no-referrer"  :src="item.picPath"  @error="imageError($event, index)" ></img>

js部分:
imageError(e, index) {
	this.newFinal[index].picPath = '../../static/exam/b1.png';
 },	

注意:在imageError方法中将无法显示的图片替换成本地静态图片时,注意应该直接对遍历的对象修改,如果传值item修改item,是无法显示默认图片的

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值