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

最新推荐文章于 2025-03-07 00:10:11 发布

dralexsanderl

最新推荐文章于 2025-03-07 00:10:11 发布

阅读量3.4k

点赞数 4

分类专栏： html 微信小程序文章标签： javascript html5 微信小程序

本文链接：https://blog.csdn.net/qq_42880714/article/details/131466179

版权

html 同时被 2 个专栏收录

18 篇文章

订阅专栏

微信小程序

6 篇文章

订阅专栏

文章介绍了前端如何处理图片加载失败的问题，包括通过onerror事件监听单个和全局图片加载异常，设置alt属性提供替代文本，使用兜底图以及在微信小程序中的处理方法，还提到了base64编码作为兜底图的一种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

图片加载监听

单个捕获

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事件了。

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

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