图片加载失败的回退方案
当图片加载失败时显示错误消息。
- 将样式应用于
img
元素,使其像文本容器一样。 - 使用
::before
和::after
伪元素来显示错误消息和图片的 URL。这些元素只会在图片加载失败时显示。
<img src="https://nowhere.to.be/found.jpg" />
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
img::before {
content: "抱歉,此图片无法加载。";
display: block;
margin-bottom: 8px;
}
img::after {
content: "(URL: " attr(src) ")";
display: block;
font-size: 12px;
}