首先在入口文件定义一个全局指令
Vue.directive('real-img', async function (el, binding) {
let imgURL = binding.value;
if (imgURL) {
let exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
}
}
})
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;
})
}
然后使用的时候就特别方便了,因为是全局注册的,所以每个页面都可以直接使用
<!--v-real-img 就是刚刚定义的指令,绑定的为真实要显示的图片地址。src为默认图片地址-->
<img src="images/logoError.png" v-real-img="images/logo.png">
使用这种方法还有一个天然的优势,那就是当网速较慢或者图片一次性加载较多的话,可以达到占位图的效果。来,look look。