前提：当我们加载图片地址时，可能会出现错误；这时就会触发onerror事件，可以使用一张提示错误的图片代替显示不了的图片，提升用户交互体验。
一、常规的处理方法
<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">
当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。当logo.png图片存在则显示logo.png，不存在将显示 logoError.png。
但是，要注意的是，如果logoError.png 也不存在，则会持续触发 onerror导致死循环页面卡死。
当然，解决办法是有的：
<img src="images/logo.png" onerror="notfoundimg;"/>
<script type="text/javascript">
function notfoundimg() {
let img = event.srcElement;
img.src = "images/logoError.png";
img.onerror = null; //解绑onerror事件
}
</script>
二、通过vue绑定onerror实现
<img :src="images/logo.png" :onerror="defaultImg">
<script>
export default {
name: "imgError",
data() {
return {
defaultImg: 'this.src="' + require('images/logoError.png') + '"' //默认图地址
}
}
}
</script>
同样的，这里也会遇到跟第一种方法类似的问题，当默认图也不存在时，图片加载死循环。
三、通过vue自定义指令
为了解决图片加载死循环的问题，我们使用vue自定义组件。
首先在入口文件定义一个全局指令
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
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;
})
}
因为是全局注册的指令，所以每个页面都可以直接使用。
<!--v-real-img 就是我们定义的指令，绑定的为真实要显示的图片地址。src为默认图片地址-->
<img src="images/logoError.png" v-real-img="images/logo.png">
网友评论