uniapp 图片加载失败404-替换成默认图片

uniapp 图片加载失败404-替换成默认图片

图片有一个事件

• onerror：图像加载过程中发生错误时被触发。
• onabort：图片加载的时候，用户通过点击停止加载时触发，通常在这里触发一个提示：“图片正在加载”。
• onload：当图片加载完成之后触发。

关于onerror的触发条件

1. src属性为空或者null
2. src的地址与当前页面的地址一致
3. 在加载过程中因为某些原因崩溃
4. 图片的元数据已损坏，无法知道尺寸，并且<img>标签也没定义尺寸
5. 当前的user agent不支持该图片格式

关于不能动态更新视图 - this.$set

• 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

this.$set( target, key, value)

• target：要更改的数据源(可以是对象或者数组)
• key：要更改的具体数据
• value ：重新赋的值

问题 - 后端传过来一个数组，然后里面又图片地址，当图片地址为404或其他无法加载的情况下，显示默认图片

1. 先再data里初始化数组接受值并且再接口返回值接受数组

data() {
	return {
		srcBox: []
	}
}

2. 先根据error方法获取加载失败图片的索引

<image v-for="(item, index) in srcBox" :src="item" @error="error(index)"></image>

3. 利用索引将数组的无法加载图片替换成默认图片

error(index) {
	console.log(this.srcBox);
	console.log(index)
	this.$set(this.srcBox, index, this.src);
}

结语

• 但是如果数组过于庞大，无法加载图片过多的话，控制台打印错误信息太多会导致日志崩溃，暂时没有解决的方法。