图片加载失败后的处理

由于公司业务的原因，会存在累计很多失效的历史图片和第三方平台传过来跨域限制的图片等原因，导致<img>无法正常加载，在默认情况下会显示浏览器默认的“裂开”的图片效果
一. 样式可以直接处理

//CSS代码：
img[src$="break.svg"] {
    object-fit: contain;
}
//HTML代码：
<img src="defaultImg()" onerror="this.src='break.svg';">

*可参考张鑫旭大佬的(图片加载失败后CSS样式处理最佳实践).

二. 采用全局自定义组件，有些地方可以使用kd-image(自定义业务组件)，还是有些地方直接使用<img>标签，所以综合考虑还是写了一个全局自定义指令：如下

import Vue from 'vue';

//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为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;
    });
};

使用：当然全局main.js注入一下 import '../utils/directives/picDirective.js',封装轮播的图片出错的也可以显示替换的UI图片了

<img :src="defaultImg()"  v-real-img="event.imageUrl" alt="加载失败"/>

效果图：

error.png