vue自定義指令，比onerror更優雅的方式實現當圖片加載失敗時使用默認圖，提供三種方法

首先，來看下效果圖（演示一下圖片正常加載與加載失敗時的效果）

在線體驗地址：https://hxkj.vip/demo/vueImgOnerror/

一、常規方法解決

我們都知道，img標簽支持onerror 事件，在裝載文檔或圖像的過程中如果發生了錯誤，就會觸發onerror事件。可以使用一張提示錯誤的圖片代替顯示不了的圖片。

例如這樣使用：

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

當圖片不存在時，將觸發 onerror，而 onerror 中又為 img 指定一個logoError.png 圖片。也就是說圖片存在則顯示logo.png，圖片不存在將顯示 logoError.png。
但是，注意哦，這里有個大坑哦，如果logoError.png 也不存在，則會繼續觸發 onerror，導致死循環，頁面卡死。而且，就算圖片存在，但網絡很不通暢，也可能觸發 onerror。
當然，解決辦法是有的：

<img src="images/logo.png" onerror="notfound();"/>

<script type="text/javascript">
    function notfound() {
        var img = event.srcElement;
        img.src = "images/logoError.png";
        img.onerror = null; //解綁onerror事件
    }
</script>

二、通過vue綁定onerror實現

本質上跟第一種方法是差不多的

使用方法：

<img :src="images/logo.png" :onerror="defaultImg">

<script>
    export default {
        name: "imgError",
        data() {
            return {
                defaultImg: 'this.src="' + require('images/logoError.png') + '"' //默認圖地址
            }
        }
    }
</script>

同樣的，這里也會遇到跟第一種方法類似的問題，當默認圖也不存在時，圖片加載死循環。

三、通過vue自定義指令

注意哦，大招來了O！！！每次使用vue的指令都感覺好爽，特別的方便，現在自己搞一個，用起來會更爽。

在這之前，先了解下vue的自定義指令到底怎么玩，還是很有必要的。
這種東西呢，還是看文檔吧，文檔寫得挺詳細的。傳送門：https://cn.vuejs.org/v2/guide/custom-directive.html

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

//全局注冊自定義指令，用於判斷當前圖片是否能夠加載成功，可以加載成功則賦值為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);
        } 
    }
})

/**
 * 檢測圖片是否存在
 * @param url
 */
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">

使用這種方法還有一個天然的優勢，那就是當網速較慢或者圖片一次性加載較多的話，可以達到占位圖的效果。來，look look。

Okay，三種方法都介紹完了，選哪種各憑喜好！

看完之后有什么不懂的，可以留言反饋。

DEMO GitHub地址：https://github.com/TangSY/vue-img-onerror

轉載請注明出處：https://www.jianshu.com/p/394c487d81d7
作者：TSY
個人空間：https://hxkj.vip