图片加载错误的捕获及处理

引言

前端开发中，图片是我们在网页中加载最多的静态资源类型之一，但是图片加载过程中也有可能出现加载失败的情况，这是十分影响用户体验的。那么如何正确的判断图片是否成功加载，以及图片加载失败的时候，如何处理，就是本篇文章所要讲解的主要内容。

设置alt属性

我们看看w3c对这个属性的解释。

它的用法也非常简单,直接给img标签加上这个属性就行。

<img src="https://p4.ssl.qhimg.com/t019f326a5524ce5fcc.png" />
            <img src="https://p5.ssl.qhimg.com/t0139228d9f6f26225c.png" />
            <img
              src="https://p5.ssl.qhimg.com/t01950dfde27027b6191.jpg"
              alt="图片加载失败啦"
            />

但是这种效果其实是不太理想的，这个一张默认破裂的图片，然后alt的内容作为文字提示，用户可以通过文案知道，图片加载失败了。上述这种方式虽然达到了目标，但是确实算得上比较的粗糙。后续我们还有更好的手段来进行优化。

设置兜底图

这是图片错误处理中最常用的手段，后续代码都是基于react来进行演示。

单个元素处理

这种处理方法类似于图片懒加载，图片没有完全加载的时候，我们给予img标签一张默认的图片，当图片加载失败时，就展示我们兜底图。

第一步就是如何判断我们的图片是否加载错误，img标签有一个onerror事件，下面是mdn对该事件的描述。