vue自定义指令之图片加载失败

说到加载失败，第一时间都会想到 onerror，这样：

<img src="/img/covers.png" alt="封面" onerror="javascript:this.src='/img/default.png'">

这样处理没问题，但如果放到项目中，几十上百个页面，一个一个加，就太重复了；而且还有个问题，如果图片过大，加载时间过长，效果也会严重影响用户体验，所以，这里需要同时解决两个问题：

1、在图片加载出来之前，给一个默认图片

2、图片加载失败，用默认图片来代替

 

回到代码层面，这个指令的逻辑：测试页面的图片是否有效，有效就替代默认图片，否则就不操作。具体如下：

defaultImg.js

//检测图片是否有效
const imgIsAvailable = function(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
    })
}
export default async function(el, binding) {
    let url = binding.value,available = await imgIsAvailable(url)
    if (available) {
        el.setAttribute('src', url)
    }
}

main.js 

import defaultImg from '@/config/tools/defaultImg'

Vue.directive('default-img',defaultImg)

页面 

<el-table-column prop="covers" label="封面" width="180">
    <template slot-scope="scope">
        <img src="/img/default.png" alt="封面" class="grid-photo" v-default-img='scope.row.covers'>
    </template>
</el-table-column>

 效果：