Question

Some people set default src to img element in the following way:

<img src="foo.jpg" onerror="this.src='default.jpg'" />

I think it’s not the best way because a additional http request will be sent when onerror event be fired, and our log component will log the worthless error message.

I think I can do in following way:

Create a HttpHandler(.ashx) to send appropriate image to client. So I can write a img in page like this: <img src=‘ImageHandler.ashx?id=foo.jpg’/>. App will check whether the image(foo.jpg) exists or not, then decides to send foo.jpg or default.jpg.

Is it right? Do you have better resolution?

Answer 1

yeah there is a way :

<object data="http://aaa.com/does-not-exist.png">
    <img src="http://aaa.com/content/img/so/logo.png">
  </object>

how ever you should tyry it with the Browser compatibility.

another solutiuon is :

<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

if the inside image doesn’t exists , the outer will be performed.

After a srarch : this question was asked before here :

Inputting a default image in case the src attribute of an html <img> is not valid?