源自:https://www.zhangxinxu.com/wordpress/2020/10/css-style-image-load-fail/
网站网页中一般会有图片显示,这些图片归根到底是存储在服务器硬盘中的。经历长年累月,某些图片可能会丢失了。这时网页中会如下显示:
可见非常地不美观。本文提供了一个简单的解决方案。当网页不存在时,图片将自动更换为另外一个图片。
图片正常显示时:
图片丢失时:
图片不存在但有异常处理:
CSS代码:
img {
width: 128px; height: 96px;
object-fit: cover;
}
img[src$="break.svg"] {
object-fit: contain;
outline: 1px solid #ddd;
outline-offset: -1px;
}
HTML代码:
<img src="71.jpg" onerror="this.src='break.svg';">
当71.jpg图片不存在时,将触发onerror函数,将图片src替换为break.svg图片。
我已将代码上传,下载码是:D7BE73E53B
下载码是啥?如何下载=》点击查看