uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片

一、解决方法（在单层循环中）

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默认不会更新，所以我们要把数组赋值为空，然后重新赋值（默认图片地址）