Setting a default image

[howie2009]

Hi,
Hopefully you can help. I'd like to set a default image if the user chooses not to select and image.

Below is the html that displays the image if a user uploads one:
###################################

<!-- begin small_image --><a href="{ads_details_url}"><img src="{src}" {width} {height} border="0" vspace="0" hspace="5" alt="{alt}"></a>

<!-- end small_image -->
###################################
Is there some javascript I can use that says if {src} is empty then use
image/default.jpg

THANKS!!!

[howie2009]

I was looking at:
function replaceMissingImages(){
for (var i=0; i<document.images.length; i++){
img = new Image();
img.src = document.images[i].src;
if (img.height == 0)
document.images[i].src = 'mydefault.jpg';
}
}
but don't know how to customise it

[Leeoniya]

this is better done with CSS rather than JS. set the "background-image" property of the links to url("default_image.jpg") or whatever. then if an image doesn't load, the background will be visible.

[adios]

With CSS, you will still get that 'image not found' icon in IE. With FF it'll work, as long as you specify "display:block;" in your CSS, along with the width & height.

This requires JS, but works in IE as well:

<img ..... onerror="this.src='src of default image'" />

Probably not a bad idea to use both. The onerror handler runs when an image fails to load.

[howie2009]

Thanks Guys!

[Philip M]

Originally Posted by adios

This requires JS, but works in IE as well:

<img ..... onerror="this.src='src of default image'" />

The onerror handler runs when an image fails to load.

A small but important detail -

In a webpage with an HTML snippit such as the above, a stack overflow
error occurs if the image file does not exist:-

onerror = "this.src = 'some-other-non-existent-filename.jpg';">

So important to ensure that the default image exists in the correct directory.

[randomuser773]

Originally Posted by adios

This requires JS, but works in IE as well:

<img ..... onerror="this.src='src of default image'" />

The onerror handler runs when an image fails to load.

To prevent recursion in the event of an error loading the replacement, the onerror handler should self-cancel:

<img ..... onerror="this.onerror=null; this.src='src of default image;'" />