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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

1 comment:

Anonymous said...

Work perfectly!!