图片加载失败捕获上报及处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了图片加载失败捕获上报及处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

图片加载监听

单个捕获

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);

图片加载失败的情况

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

图片加载失败处理

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

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

设置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事件了。文章来源地址https://www.toymoban.com/news/detail-510366.html

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

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