Display Default Image when No Image Found

Here’s a solution to display a Default Image in the Image control, when the original image is not available. The same solution can be applied to both ASP.NET Image Controls as well as HTML image controls

ASP.NET Image Control

<asp:Image ID="imgProd" runat="server"
onerror="this.onload = null; this.src='ImageurlORAnyImageHere.jpg';"/>

HTML Image Control

<img id="imgProd1" src="someimage.gif"
onerror="this.onerror=null; this.src='ImageurlORAnyImageHere.jpg';" />

We are using the onerror event of the image tag, which triggers if there is an error while loading an image. If an error occurs, we display 'ImageurlORAnyImageHere.jpg' as the default image. You can even add an image url.

If you are looking out to apply the same technique while loading images in an ASP.NET GridView, check my article Loading Images Asynchronously Inside an ASP.NET GridView

6 comments:

  1. AnonymousMarch 26, 2012 at 3:22 AM

    Work perfectly!!

    ReplyDelete
  2. carcebApril 10, 2017 at 4:15 PM

    Searching for this solution all across the internet and nobody knew how to do it and you in, ONE SIMPLE LINE, solve al my problems THANK ONE MILLION

    ReplyDelete
  3. Suprotim AgarwalApril 14, 2017 at 1:24 AM

    Glad to hear it helped you out :)

    ReplyDelete
  4. UnknownFebruary 21, 2018 at 11:35 PM

    Sir, What is the purpose of "this.onerror=null;"?

    ReplyDelete
  5. Suprotim AgarwalFebruary 22, 2018 at 1:24 AM

    onerror is an image event. Here we are setting it to null so that the browsers don't repeatedly fire the error event.

    ReplyDelete
  6. UnknownFebruary 22, 2018 at 1:40 AM

    Thank you, for explanation Sir.

    ReplyDelete