Setting a default src to img element

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?

Are you not in control of the web server, or how come you have to check if the images exist? Are you referencing images hosted by others? — Christofer Eliasson, Mar 21 '12 at 08:26
Yes, I'm using asp.net. I will check the file by Method in System.IO -File.Exists(filePath). — Domi.Zhang, Mar 21 '12 at 08:31
@Domi.Zhang try to avoid server side operation for this scenario... — Royi Namir, Mar 21 '12 at 08:36

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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?

Setting a default src to img element

1 Answers1