最近开发的项目是微信小程序,动态显示图片,遇到了一些问题
- 图片是从别的网站获取的网络图片,使用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,是无法显示默认图片的