自定義指令-圖片加載失敗使用默認圖片

// EmojiUtils.js
export default class EmojiUtils {
 static  imageIsExist (url) {
    return new Promise((resolve) => {
      let img = new Image()
      img.onload = function () {
        if (this.complete === true) {
          resolve(true)
          img = null
        }
      }
      img.onerror = function () {
        resolve(false)
        img = null
      }
      img.src = url
    })
  }
}

// main.js
import Vue from 'vue'
import EmojiUtils from '@/utils/EmojiUtils'
// 全局注冊自定義指令，用于判斷當前圖片是否能夠加載成功，可以加載成功則賦值為img的src屬性，否則使用默認圖片
Vue.directive('default-img', async function (el, binding) { // 指令名稱為：default-img
  let needLoadDefault = binding.value // 獲取圖片地址
  if (needLoadDefault) {
    let imgURL = el.getAttribute('src')
    if (imgURL) {
      let exist = await EmojiUtils.imageIsExist(imgURL)
      if (exist) {
        el.setAttribute('src', imgURL)
      } else {
        el.setAttribute('src', '/static/img/x.png')
      }
    } else {
      el.setAttribute('src', '/static/img/x.png')
    }
  }
})
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容