一、解决方法(在单层循环中)
在这里插入图片描述

HTML:
在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数

<image v-else :src="item" mode="aspectFit" @error="imgerror($event, index)"></image>

JS:

imgerror(e, index) {  
	this.xiangqingUrl.splice(index, 1)
	this.xiangqingUrl.splice(index, 0, '/static/img/noimg.png')
},

单层结构默认图片可能因为数组长度没有发生改变,因此Vue不会更新数据,因此我们需要删除一个元素后再新增一个默认图片地址,使得Vue发生数据更新。

二、双层循环嵌套解决方法
在这里插入图片描述

HTML:
在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数

<swiper-item v-for="(value , indexs) in item.phonts" :key="indexs" >
	<video v-if="value.indexOf('mp4') >-1" :src="value" controls></video>
	<image v-else :src="value" mode="aspectFit" @error="imgerror($event, indexs,index)"></image>	
</swiper-item>

JS:

imgerror(e, indexs,index) {
	var ps = JSON.parse(JSON.stringify(this.list[index].phonts))
	this.$set(this.list[index],this.list[index].phonts,[])
	ps[indexs] = '/static/img/noimg.png'
	this.list[index].phonts = ps
},

解释:因为vue的数据绑定存在一些问题,所以在双层遍历当中会出现数据更新问题,因此我们需要给图片数组重新更换地址
注:如果图片长度不改变,vue默认不会更新,所以我们要把数组赋值为空,然后重新赋值(默认图片地址)

Logo

前往低代码交流专区

更多推荐