图片加载失败的回退方案

当图片加载失败时显示错误消息。

• 将样式应用于 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;
}