Fallback for images that fail to load

CSS, Visual · Nov 4, 2022

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.
Preview
<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;
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this