如何在Vue中處理錯誤圖片

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

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

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

就使用到了VUe的指令。

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

代碼如下

// 如果自定義指令多的話，再重新開啟一個文件專門寫自定義指令 太亂了
//全局注冊自定義指令，用于判斷當(dāng)前圖片是否能夠加載成功，可以加載成功則賦值為img的src屬性，否則使用默認圖片
//指令名稱為：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;
 })
};

使用方式

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

第二種是直接加載圖片，等到加載失敗的時候使用默認圖。

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



// 單獨作用于應(yīng)用模塊的管理
// 傳的是錯誤的圖片
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);
  }
 }
});

Vue文件中使用方式如下

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。