图片加载时或者加载失败处理(vue)

图片加载时或者加载失败处理(vue)

//课评系统在index.js 中添加自定义组件
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
//========index.js======
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;
    })
}

//页面引用
<img src="../images/headimg.png" v-real-img="student.headimgurl" alt="" :title="student.studentname" class="imgBorder">
    
    2019-04-02 02:31:55