图片加载失败捕获上报及处理

前端页面中加载最多的静态资源之一就是图片了，当出现图片加载失败时，非常影响用户体验。这时候我们就需要对图片是否成功加载进行判断，并对图片加载失败进行处理。

图片加载监听

单个捕获

HTML中的img标签可以绑定onerror监听，来对目标图片加载失败进行处理。

<img id="pic" src="http://picundefined.png" />
<script>
  const img = document.getElementById('pic');
  img.onerror = function (e) {
    console.log('图片加载异常', e.target)
  };
</script>

统一捕获

对于实际项目而言，可能存在非常多图片，如果对于每个img标签都单独绑定处理函数，不仅麻烦，而且可能会有遗漏，后期也不好维护。这时候可以通过window.addEventListener方法添加全局的onerror的事件监听。不过由于 addEventListener 也能够捕获 js 错误，因此需要过滤判断，判断为资源错误的时候才进行处理。

window.addEventListener('error', event => {
  // 过滤js error
  let target = event.target || event.srcElement;
  if(target instanceof HTMLImageElement) {
    console.log("图片加载异常", target);
  };
}, true);

图片加载失败的情况

1. 网速太慢
2. src值异常（图片链接失效或者错误）
3. 浏览器禁用图像
4. 用户使用屏幕阅读器

图片加载失败处理

如果没有任何处理，那么在浏览器中就展示一个破裂图片。

设置alt属性

HTML为这种情况提供了一个alt属性，规定在图像无法显示的时候展示的替代文本。

这种方式适合所有图片加载失败的情况。

设置兜底图

这是图片错误处理中最常用的手段，不过只针对上面提到的1、2种情况。

当图片加载失败时，就展示兜底图。

这里使用全局获取方式进行处理：

window.addEventListener('error', event => {
  // 过滤js error
  let target = event.target || event.srcElement;
  if(target instanceof HTMLImageElement) {
    console.log("图片加载异常", target);
    target.src = '兜底图.png';
  };
}, true);

base64编码

如果是由于网速太慢原因导致的图片加载异常，那么兜底图也可能也可能加载失败，这时候就会导致无限触发onerror处理，可以使用base64编码的方式将兜底图硬编码在代码中，这样当js加载的时候，图片也完成了加载。

base64本身的特性就决定了图片就会比原来大上1/3左右

微信小程序中的处理

由于微信小程序中image标签不支持onerror事件，所以就只能通过在每一个image标签上添加binderror事件了。

<image src="{{imgSrc}}" mode="scaleToFill" binderror="errorHandle"></image>

errorHandle: function (e) {
  this.setData({
    imgSrc: "兜底图.png",
  })
},