vue中img標簽onerror事件

使用:onerror去綁定事件

該方法能正確處理onerror事件，并防止閃圖

<img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" />//圖片損毀時觸發imgOnError(e){let img = e.srcElement;img.src = this.errorImg;img.onerror = null; //防止閃圖},

使用@error會導致回閃

使用@error會導致回閃，圖片回閃問題

<img type="image/x-icon" :src="item.icon?item.icon:''" @error="imgOnError($event)" />//圖片損毀時觸發imgOnError(e){console.log("閃圖")let img = e.srcElement;img.src = this.errorImg; //data中的圖片img.onerror = null; //防止閃圖，寫了但是圖片還是會回閃},

這種圖片不回閃，但是還是回瘋狂回調onerror事件，并且會發現元素的onerror事件那里還注冊這函數，并沒有清除掉。

<img type="image/x-icon" :src="item.icon?item.icon:''" @error="imgOnError()" />//圖片損毀時觸發imgOnError(){console.log("觸發事件")let img = event.srcElement; //已經棄用img.src = this.errorImg; //data中的圖片img.onerror = null; //防止閃圖，寫了但是還是會瘋狂回調onerror的注冊事件},

關于沒圖片時onerror事件不觸發問題

vue在item.icon為null或者undefined時，并不會對這個src進行賦值，沒有src屬性貌似是無法觸發onerror事件的。

<img type="image/x-icon" :src="item.icon" :onerror="imgOnError" /> <!--vue處理出來結果，沒src無法觸發onerror事件--> <img type="image/x-icon" /><img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" /> <!--vue處理出來結果，有src并且解析不出圖片，觸發onerror事件--> <img type="image/x-icon" :src=""/>

總結

以上是生活随笔為你收集整理的vue中img标签onerror事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。