VUE图片加载失败的处理方法

背景

vue项目要求对图片做个加载失败的处理。

处理方法

主要通过onerror事件进行处理；当数据加载期间发生错误时执行 JavaScript 

img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片；

具体实现

//当imgUrl为空的时候，调用加载失败图片；当imgUrl不为空，但图片地址错误时，调用onerror事件，指定此时的src地址为加载失败图片；
<img :src="imgUrl?imgUrl:'../../../assets/images/noImg.png'" :onerror="errorImage" alt="" src="">
  
//data
 errorImage： 'this.src="' + require('../../../assets/images/noImg.png') + '"';

扩展

在vue中，动态加载图片时，需要用require动态引入图片。原因是vue在DOM中直接引入的图片会被转为 base64 格式的，但是使用变量引入的话，图片不会转为 base64 格式的，所以不会正常显示。解决方法就是变量使用 require 来引入图片。

参考

1. vue中使用require来引入静态图片资源
2. Vue图片加载错误、图片加载失败的处理