vue 圖片加載錯誤顯示默認圖片

 

參考文檔 https://www.cnblogs.com/z937741304/archive/2019/11/06/11809547.html

 

方法一： onerror

onerror加載默認圖片

方法二：自定義指令

建議先加載圖片，圖片加載錯誤后加載默認圖片，自定義指令可在不同頁面使用，避免代碼重復。

/**
* 檢測圖片是否存在
* @param url
*/
let imageIsExist = function (url) {
  return new Promise((resolve) => {
    var img = new Image();
    img.onload = function () {
      if (this.complete == true) {
        console.log('資源加載');
        resolve(true);
        img = null;
      }
    }
    img.onerror = function () {
      console.log('資源error', img);
      resolve(false);
      img = null;
    }
    img.src = url;
  })
};



// 單獨作用於應用模塊的管理
// 傳的是錯誤的圖片
Vue.directive('err-img', async function (el, binding) {
  let imgURL = binding.value;//獲取圖片地址
  let realURL = el.src;
  if (imgURL) {
    let exist = await imageIsExist(realURL);
    if (!exist) {
      el.setAttribute('src', imgURL);
    }
  }
});

 

使用

 <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt=""> 

 

方法三：當異步獲取圖片加載失敗

異步獲取圖片鏈接，圖片加載成功則顯示成功的url,加載失敗顯示默認 defaultImg 圖片

// 在接口中獲取圖片鏈接后調用this.loadImg

loadImg(url) {
      const img = new Image();
      img.src = url;
      img.onload = () => {
        this.imageUrl = url;
      };
      img.onerror = () => {
        this.imageUrl = this.defaultImg;
      };
    },

 

<img class="img-url" :src="imageUrl" />