使用vue自定義指令 實現當圖片加載失敗時使用默認圖

首先在入口文件main.js定義一個全局指令

//全局註冊自定義指令，用於判斷當前圖片是否能夠加載成功，可以加載成功則賦值爲img的src屬性，否則使用默認圖片
Vue.directive('real-img', async function (el, binding) {//指令名稱爲：real-img
    let imgURL = binding.value;//獲取圖片地址
    if (imgURL) {
        let exist = await imageIsExist(imgURL);
        if (exist) {
            el.setAttribute('src', imgURL);
        } 
    }
})
//檢測圖片是否存在
let imageIsExist = function(url) {
    return new Promise((resolve) => {
        var img = new Image();
        img.onload = function () {
            if (this.complete == true){
                resolve(true);
                img = null;
            }
        }
        img.onerror = function () {
            resolve(false);
            img = null;
        }
        img.src = url;
    })
}

然後使用的時候就特別方便了，因爲是全局註冊的，所以每個頁面都可以直接使用

<!--v-real-img 就是剛剛定義的指令，綁定的爲真實要顯示的圖片地址。src爲默認圖片地址-->
<img src="images/logoError.png" v-real-img="images/logo.png">