vue+element 图片加载失败处理方案--起死回生之术

基于vue+element Image组件
el-image组件加载失败默认如下图：（这不是想要的结果，我想要真正加载成功的图！！！）

失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求！

el-image结构代码如下：（循环生成的多张图片，同样适用于单张图片，不过单张图片无需如此麻烦）

vue项目error方法绑定once，为避免同一个失败链接无限触发error

定义好的测试数据：

imgList: [
  'http://10.5.4wei1/data/mvtec_ad/grid/train/good/075.png',
  'http://10.5.4che/liwei1/data/mvtec_ad/grid/train/good/207.png'
],
errobj: {}

图片加载失败后触发error的函数：（没有注释，乱七八糟，下面会详细讲解每一句存在的意义）

srcerr(item, index) {
  if (/^err/.test(this.imgList[index])) {
     this.$set(this.imgList, index, this.imgList[index].slice(3))
   } else {
     if (!this.errobj[item]) {
       this.errobj[item] = 1
     } else {
       if (this.errobj[item] > 2) {
         return
       } else {
         this.errobj[item] += 1
       }
     }
     this.$set(this.imgList, index, 'err' + item)
   }
 }

下面注释枯燥乏味，可以不看，直接复制上边代码使用没什么不可以

1. 首先，图片加载失败后会触发标签绑定error的函数srcerr，srcerr接收到的参数不必解释，必须要传，有用；
2. /^err/.test(this.imgList[index])（注意这里匹配的不是item,下面你会明白为什么）判断该图片的链接是否以err开头，第一次触发error当然不是了
3. 那么执行this.set(this.imgList, index, ‘err’ + item)，当然err是自己拼接上去的，你可以拼接成任何你喜欢的东西只要和真正图片路径开头不一致即可。
4. 这时imgList列表更新重新赋值失败图片的src，当然这次一定会再触发error，因为链接上拼接了err
5. 这次会执行if里的语句this.set(this.imgList, index, this.imgList[index].slice(3))，把截掉err的链接重新赋值回imgList，imgList更新又赋值链接给图片，到目前为止该图片已经重新请求了一次正确的地址，正常情况下图片会成功渲染。
6. 但是，万一链接本身是错误的，就像上边imgList里的数据是不可能请求到图片的。。。
7. 如此，就会陷入循环地狱，once只能对同一个错误拦截，拼接err链接改变了下一次又截取掉了，所以会无限循环下去，之前一切的努力都付之一炬了。。。
8. 执行报错函数else条件里的判断就是解决这个问题的，，!this.errobj[item]判断data里定义好的errobj对象里是否存在该条链接，不存在则保存在errobj里对应的值为1。
9. errobj里存在该链接则判断其值，这里条件为大于2则return掉，否则其值加1，这样的话加载失败的链接无论失败多少次（除了首次），都有最多3次请求的机会，超过3次链接不会拼接err，失败的error就不会再触发。
10. 使用errobj对象保存每条加载失败的链接好处就是无论页面有多少图片加载失败，每一张都还有3次加载的机会，也能解决掉循环地狱的问题。
11. 如果你的网速超慢，请求3次都不成功，那么可以尝试条件放大点，请求5次10次。如果还失败，建议不要做无谓的挣扎了，毕竟一张图片单独请求10次还不成功，怀疑它是不是图片。

补充一条：为什么要拼接err再截取掉，而不是直接赋值当前链接。原因是直接赋值请求失败图片的链接和赋值的链接一模一样，由于vue机制的限制，修改的数据和原数据相同，那么数据不会更新，数据不更新页面el-image标签就不会接收到新的src，组件内部就不会触发更新img的src，所以中间多传递一次错误的src是为了下一次赋值正确src的时候可以触发视图更新。

项目中需要展示的图片超多，经常会出现加载失败的情况，记录该问题解决方案。
此文章只提供类似问题解决方案，代码仅供参考，如有不妥欢迎留言指教！