PhotoSwipe 404 prevention with fallback image

Question

I'm displaying some images from Instagram in a PhotoSwipe gallery. The problem is that if the image gets deleted from Instagram, I get 404s in the gallery.

How can I check if the image results in 404 and if so, display a locally saved image (as a fallback)?

Answer 1

You can use the onerror attribute of <img> tag

 <img src="http://www.somewebsite.com/image.png" width=640 height=640 onerror="this.src='/default.png'" />

if image.png does not exist, then default.png is loaded