vue自定义指令 默认图片
- 2020 年 10 月 29 日
- 筆記
/**
* 检测图片是否存在
* @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`’>
