Photo of DeepakNess DeepakNess

Handling missing images in Netlify

Unproofread notes

I was creating a Next.js website where a few images were broken at the time and I wanted to show an "image not available" image whenever there are broken 404 images. And somehow I discovered that adding the below lines in the netlify.toml does that gracefully:

# Handle missing images gracefully
 [[redirects]]
  from = "/subfolder/*"
  to = "/image-not-available.png"
  status = 404

And in that subfolder whenever there are broken or 404 images, it automatically redirects them to the fallback image, and in this case, to this image-not-available.png image.

This is amazing.

Comment via email