get rid of red X in IE for non-existing images

Question

I have a 3rd website (Confluence) which references images which are secured by a login.

If the current user is logged in the image is shown if not the image url would redirect to a login form.

Example

<img src="secure/myimage.gif" />

When you enter this url in the browser a redirect to the login page is done.

The problem now: IE shows a the dreaded red X icon for the image even though there should be just nothing (like in Firefox). Anyone knows how to get around this?

Answer 1

Here are some solutions:

1. redirect the page that contains secured images to the login form
2. the image service returns a default one if security check failed.
3. ship a hacked IE to your client with the red X replaced by a blank one like Firefox you mentioned.

Answer 2

Use the onError event to set a default image.

This will function in any browser.

The blank image show in FF is a quirk of FF because the received file isn't an image it should report an error.

Answer 3

I found a fine solution using jQuery: This script replaces all "broken" images with a defined placeholder. Works perfect in IE/FF/Chrome

<script type="text/javascript" lang="javascript">

jQuery(window).bind('load', function() {
jQuery('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        jQuery(this).attr('src', 'placeholder.gif');
    }
}); 
})

</script>