Get rid of red X in IE for non-existent images

Question

I have a third site (Confluence), which refers to images that are protected by login.

If the current user is registered in the image, it is displayed if the image URL is not redirected to the login form.

Example

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

Entering this URL in the browser redirects to the login page.

Now the problem: IE shows a terrible red X for the image, although it should not contain anything (for example, in Firefox). Does anyone know how to get around this?

Answer 1

Use onError to set the default image.

This will work in any browser.

Displaying an empty image in FF is a FF quirk because the resulting file is not an image in which it should report an error.

Answer 2

Here are some solutions:

• redirect the page containing the protected images to the login form
• the image service returns the default value if the security check fails.
• send hacked IE to your client with replaced red X empty, as you mentioned Firefox.

Answer 3

I found a great solution using jQuery: This script replaces all “broken” images with a specific placeholder. Works fine 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>