优雅的处理图片错误

图片显示错误处理

在我们的实际工作中，不可避免的会在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示。我们希望有一种降级处理的方式，可以在图片加载失败后显示一张我们预先设定好的默认图片

一、监听图片的 error 事件

由于图片加载失败后，会抛出一个 error 事件，我们可以通过监听 error 事件的方式来对图片进行降级处理

<img id="img" src="//xxx.xxx.xxx/img.png">
const img = document.getElementById('img');
img.addEventListener('error',function(e){
    e.target.src = '//xxx.xxx.xxx/default.png'; // 为当前图片设定默认图
})

这种方式，确实实现了对异常图片的降级处理，但每张图片都需要通过 JS 进行获取，并且监听 error 事件，对于大量图片的情况并不适用

为此，我们可以使用内联事件来监听 error 事件

<img src="//xxx.xxx.xxx/img.png" onerror="this.src = '//xxx.xxx.xxx/default.png'">

我们可以看到，完全不需要单独去写 JS 的监听，我们就实现了异常图片的降级处理

二、通过css伪元素

使用css伪元素处理图片加载异常，当图片正常加载时，img的伪元素不会显示，加载异常时显示

img {
    position: relative;
    width: 40px;
    height: 40px;
    object-fit: cover;
    cursor: pointer;
}
img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-size: 100% 100%;
    background-image: url("~@/assets/image/noImage.webp");
    cursor: pointer;
}