Display a fallback for images that fail to load

Ever wanted to display a message when an image fails to load? Perhaps you want to show the image's URL or a custom error message. Luckily, there's an easy way to do so.

The key to this technique lies in the way we handle the <img> element. Instead of treating it as an image container, we'll treat it as a text container. This allows us to apply styles and pseudo-elements to it, which will only be displayed when the image fails to load.

Using the ::before and ::after pseudo-elements, we can display an error message and the image's URL. This way, users will know what went wrong and where the image was supposed to be.

The best part? This fallback message is only displayed when the image fails to load, so it won't interfere with the image itself.

<img src="/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;
}