VUE圖片加載失敗的處理方法

背景

vue項目要求對圖片做個加載失敗的處理。

處理方法

主要通過onerror事件進行處理；當數據加載期間發生錯誤時執行 JavaScript 

img標簽支持onerror 事件，在裝載文檔或圖像的過程中如果發生了錯誤，就會觸發onerror事件。可以使用一張提示錯誤的圖片代替顯示不了的圖片；

具體實現

//當imgUrl為空的時候，調用加載失敗圖片；當imgUrl不為空，但圖片地址錯誤時，調用onerror事件，指定此時的src地址為加載失敗圖片；
<img :src="imgUrl?imgUrl:'../../../assets/images/noImg.png'" :onerror="errorImage" alt="" src="">
  
//data
 errorImage： 'this.src="' + require('../../../assets/images/noImg.png') + '"';

擴展

在vue中，動態加載圖片時，需要用require動態引入圖片。原因是vue在DOM中直接引入的圖片會被轉為 base64 格式的，但是使用變量引入的話，圖片不會轉為 base64 格式的，所以不會正常顯示。解決方法就是變量使用 require 來引入圖片。

參考

1. vue中使用require來引入靜態圖片資源
2. Vue圖片加載錯誤、圖片加載失敗的處理