vue自定义指令 默认图片

/**

 * 检测图片是否存在

 * @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`'>