Replace a broken image with a default image via JavaScript In ASP.NET

In this hint, I will show How to

Replace broken image with a default image Using JavaScript


Scenario

At previous Article, I have explained How to retrieve BLOB Field from Oracle DB via ASP.Net but I found out when an employee does not have an image in the database the output look like as Replace a broken image with a default image using JavaScript In ASP.NET


Replace the broken image with a default image In ASP.NET

In Front-code  > Pick <img>  tag

<img id=”EmpImg” 
src=”ShowImage.ashx?Account=<%=Request.QueryString["Account"]%>”
alt=”" width=”100px” height=”100px” style=”float:right”/>

Add onError event with the below details, where the “images/User-Administrator-Blue-icon.png” is the path of the image that will replace the broken image.

onError="this.onerror=null;this.src='images/User-Administrator-Blue-icon.png';"

Finally, <img> tag should look like this

<img id="EmpImg" 
src="ShowImage.ashx?Account=<%=Request.QueryString["Account"]%>"
 onError="this.onerror=null;this.src='images/User-Administrator-Blue-icon.png';"
alt="" width="100px" height="100px" style="float:right"/>

In this case, if the original image is not found it will be replaced with a default one.


Conclusion

In this hint, I have explained How to replace the broken image Using JS in ASP.NET

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s