supprimer le X rouge dans IE pour les images inexistantes

Question

J'ai un 3ème site web (Confluence) qui référence des images qui sont sécurisées par un login.

Si l'utilisateur actuel est connecté, l'image est affichée, sinon l'url de l'image est redirigée vers un formulaire de connexion.

Exemple

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

Lorsque vous entrez cette url dans le navigateur, une redirection vers la page de connexion est effectuée.

Le problème maintenant : IE affiche la redoutable icône X rouge pour l'image alors qu'il ne devrait rien y avoir (comme dans Firefox). Quelqu'un sait-il comment contourner ce problème ?

Answer 1

Utilisez le onError pour définir une image par défaut.

Cela fonctionnera dans n'importe quel navigateur.

L'image vide affichée dans FF est une bizarrerie de FF car le fichier reçu n'est pas une image, il devrait signaler une erreur.

Answer 2

Voici quelques solutions :

1. rediriger la page qui contient les images sécurisées vers le formulaire de connexion
2. le service image renvoie une valeur par défaut si le contrôle de sécurité a échoué.
3. envoyez un IE piraté à votre client avec le X rouge remplacé par un X vide comme dans le cas de Firefox.

Answer 3

J'ai trouvé une bonne solution en utilisant jQuery : Ce script remplace toutes les images "cassées" par un espace réservé défini. Fonctionne parfaitement dans 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>