Vue中错误图片的处理的实现代码

2020-06-13 06:02:54易采站长站整理

})
};

// 单独作用于应用模块的管理
// 传的是错误的图片
Vue.directive('err-img', async function (el, binding) {
let imgURL = binding.value;//获取图片地址
let realURL = el.src;
if (imgURL) {
let exist = await imageIsExist(realURL);
if (!exist) {
el.setAttribute('src', imgURL);
}
}
});

Vue文件中使用方式如下


<div class="appd_d_ch_logo">
<img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
</div>

很久了学习一点新东西还是感觉挺高兴的,Vue指令很多人都见过,但是到了用的时候总是没想到,还是百度看到改造了一点点。

一段js代码不需要引入在所有的页面中使用很容易的办到,可以把这一段js代码放到Vue.prototype上面。

之前一直在想这个问题,有什么方式可以让所有的代码都可以使用一段函数或者是什么的,看到了指令,还是要多看看文档,只有到了用的时候才可能想到自己曾经看到过这么一段话,再重新翻看文档使用。