图片加载时或者加载失败处理(vue)
//课评系统在index.js 中添加自定义组件
//全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片
//========index.js======
Vue.directive('real-img', async function (el, binding) {//指令名称为:real-img
let imgURL = binding.value;//获取图片地址
if (imgURL) {
let exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
}
}
})
/**
* 检测图片是否存在
* @param url
*/
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;
})
}
//页面引用
<img src="../images/headimg.png" v-real-img="student.headimgurl" alt="" :title="student.studentname" class="imgBorder">
2019-04-02 02:31:55