![ed21effc6d329c095371fb5325081548.png](https://i-blog.csdnimg.cn/blog_migrate/7bb296eec5fc5b90b5e8f97f53fe8790.jpeg)
1、传统的图片异常处理
<img> 如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的“裂开”的图片效果,如果设置了 alt 属性值,则 alt 属性对应的内容也会一并显示。例如:
<
例如Chrome浏览器下的效果截图如下所示:
![7cb6c10e922bcc2f6b83e2a1cbe8c561.png](https://i-blog.csdnimg.cn/blog_migrate/8f17fd69f65c8ea0f3de4ff65016c338.jpeg)
可以看到图片加载异常之后的视觉效果实在是太粗糙了,程序员可忍设计师不可忍,因此,为了更好的视觉效果,实际项目开发中,我们总会对图片加载异常的边界场景进行额外的处理。
传统的图片加载异常会使用一个加载失败的占位符代替,这个占位图通常会是一张裂开的图片。
例如下面这张图: