Display alternate image

Very simple and best way to achieve this with little code

<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg">

To me the above works perfect!

You can do this using the CSS background-image property of the img element, i.e.

img
{
background-image:url('default.png');
}

However, you have to give a width or height for this to work (when the img-src is not found):

img
{
background-image:url('default.png');
width:400px;
}

<object data="foobar.png" width=200 height=200>
  <img src="test.png" alt="Just testing.">
</object>

Here foobar.png is the primary image, test.png is the fallback image. By the semantics of the object element, the content of the element (here the img element) should be rendered if and only if the primary data (specified by the data attribute) cannot be used.

Though browsers have had awful bugs in implementations of object in the past year, this simple technique seems to work on modern versions of IE, Firefox, Chrome.