Handling Broken Image Links in a Better Way (HTTP Only)

I had this problem when dealing with my PHP Application, which has to display images from MySQL Database. The rendering of images were very slow and sometimes when the images are not there, it throws a HTTP 404 Not Found Error for the image or if the image is not readable by the browser for some reason. So, I thought of correcting this problem, since the images are dynamic, I cannot control them at my Server Side.

I used this script to make sure that the images, when they are not found, replaces with a missing image. Unfortunately, this works only with the HTTP Protocol as it depends on the HTTP Status Codes. But yeah, this script is worth noting I guess. 😁

$(document).ready(function () {
  $('img').error(function () {
    $(this).attr('src', 'missing.png');
  });
});

Since this works on client side, this might help for those pages that have been loaded but failed to load the images. Hope this helps someone! Do try it out and post your comments! 😁

Live Demo

See the Pen Missing Image Handling by Praveen Kumar (@praveenscience) on CodePen.