How to replace broken image with default one in website?

Is there is a way to replace all broken images with our default image so that we can keep our website optimized and appealing?

We can solve this problem by using jQuery. There is an event "error" which we can use to solve the problem of broken images in website. It is called when element doesn't properly. You can understand it better by referring below example and implement in your website.

function handleImgError(){

if(this.alt=="author")

this.src = "http://www.webonsky.com/assets/front/resources/images/user_default_small.png";

else if(this.alt=="author-big")

this.src = "http://www.webonsky.com/assets/front/resources/images/user_default_big.png";

else if(this.alt == "topic")

// this.style = "display:none"

this.src = "http://www.webonsky.com/assets/front/resources/images/topic_default.png";

else

this.src = "http://www.webonsky.com/public/images/listing_img.jpg";

}

 

$(document).ready(function() {

$('img').on("error", handleImgError);

});

 

Here I have mentioned three conditions that is not required in every case. It is upto you how you utilize the event handling.