// 如果自定義指令多的話，再重新開(kāi)啟一個(gè)文件專門(mén)寫(xiě)自定義指令 太亂了
//全局注冊(cè)自定義指令，用于判斷當(dāng)前圖片是否能夠加載成功，可以加載成功則賦值為img的src屬性，否則使用默認(rèn)圖片
//指令名稱為：real-img
// 通用錯(cuò)誤圖片的處理方法，或者也可以懶加載的樣子
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);
  }
 }
});

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

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



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

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