图片加载失败捕获上报及处理
前端页面中加载最多的静态资源之一就是图片了，当出现图片加载失败时，非常影响用户体验。这时候我们就需要对图片是否成功加载进行判断，并对图片加载失败进行处理。
图片加载监听
单个捕获
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",
})
},
