如何在Vue中處理錯誤圖片？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，遂寧托管服務(wù)器，遂寧托管服務(wù)器，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

第一種方法，也就是百度到的最多的代碼，就是給一張圖片一個默認(rèn)值。

第二種問題，如果頁面中有很多地方都存在這個東西，那么在不同的頁面中寫很對是很麻煩的。

就使用到了VUe的指令。

這里分為了兩種情況， 一種是直接加載默認(rèn)圖片，等圖片加載完成之后再使用加載完成的圖片 。

代碼如下

// 如果自定義指令多的話，再重新開啟一個文件專門寫自定義指令 太亂了
//全局注冊自定義指令，用于判斷當(dāng)前圖片是否能夠加載成功，可以加載成功則賦值為img的src屬性，否則使用默認(rèn)圖片
//指令名稱為：real-img
// 通用錯誤圖片的處理方法，或者也可以懶加載的樣子
Vue.directive('real-img', async function (el, binding) {
 let imgURL = binding.value;//獲取圖片地址
 if (imgURL) {
  let exist = await imageIsExist(imgURL);
  if (exist) {
   el.setAttribute('src', imgURL);
  }
 }
});

/**
* 檢測圖片是否存在
* @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;
 })
};

使用方式