How to Replace a Broken Image with a Default One

There are cases in web designing wherein the image that you are placing are either unreachable or non-existing. This usually happens when image links that are hosted externally are dead or when images' src attribute are set to an invalid location.



For this cases, it would be best to replace an image with a default one. Here is a snippet for these matters:

(Note that we are using JQuery here, specifically the error handler)

$("img").error(function () {
    var defImg = "data:image/png;base64,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";
    $(this).attr("src", defImg);
});

Here we are catching the error event and simply replace it with a data image URI.

Why use image URI?

Well, you can always use another image here. Just be sure that you unbind the error handler event in case that the image you are trying to replace is not reachable too. Unbinding it may cause an infinite loop inside the function and I don't think that it may result to something nice.

By using an image URI, we can assure that the image is actually existing, in the expense that the image is loaded on the page (unless you save it on an external JS file) every now and then, which technically increases the page size and load speed.

To summarize it, it's basically your choice! :)

Usage

Just add the snippet on every page and this will automatically replace all broken images on your page. I prefer to add this on an external page and call it at the end of the page.