Skip to content

Latest commit

 

History

History
43 lines (37 loc) · 896 Bytes

broken-image-fallback.md

File metadata and controls

43 lines (37 loc) · 896 Bytes
Raw
title type shortTitle language tags cover dateModified
Fallback for images that fail to load
snippet
Broken image fallback
css
visual
building-facade
2022-11-04

Displays an error message when an image fails to load.

  • Apply styles to the img element as if it was a text container.
  • Use the ::before and ::after pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load.
<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: "Sorry, this image is unavailable.";
  display: block;
  margin-bottom: 8px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}