/**
 * 检测图片是否存在
 * @param url
 */
function imageIsExist(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;
    })
}
/**
 * 获取图片路径。如果图片存在，则替换
 * @param {*} el 
 * @param {*} binding 
 */
Vue.directive(‘realImg’, async (el, binding)=>{
    let imgURL = binding.value;//获取图片地址
    if (imgURL) {
        let exist = await imageIsExist(imgURL);
        if (exist) {
            el.setAttribute(‘src’, imgURL);
        }
    }
})
 
/**
 * 使用
 */
<img class=”bank-icon” :src=’defaultBankIcon’ v-real-img=’`/bizmate/static/frontconfig/bankIcons/${queryItem.accountInfo.bankId}.svg`’>

版权声明：本文为dxl-ggr原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dxl-ggr/p/13897858.html