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);
}

結語

• 但是如果數組過於龐大，無法加載圖片過多的話，控制台打印錯誤信息太多會導致日志崩潰，暫時沒有解決的方法。