img标签加载图片404优化方案

业务场景

<img src="demo.png" />

当页面需要显示后端传入的图片链接时，存在图片显示不出来的错误，即图片404。
这样，用户体验会比较差。

优化方案

当图片加载不到资源时，使用默认图片，进行替代。

重点

需要获知当前图片加载失败的关键，是对<img />标签的onerror方法进行监听。

实现代码如下：

<img src="demo.png" onerror="getDefaultImage()" />

<script>
function getDefaultImage(){
    event.srcElement.src = 'https://www.w3schools.com/images/compatible_firefox.png'
}
</script>

React场景

<img
    src={`${portrait}`}
    onError={({ currentTarget }) => {
        currentTarget.onerror = null; // 阻止无限循环
        currentTarget.src = defaultImage;
    }}
/>