Comment masquer silencieusement l'icône "Image non trouvée" lorsque l'image source est introuvable ?

Question

Savez-vous comment cacher le classique "Image non trouvée" d'une page HTML rendue lorsqu'un fichier image est introuvable ?

Une méthode de travail utilisant JavaScript/jQuery/CSS ?

Answer 1

<img onerror='this.style.display = "none"'>

Answer 2

Vous pouvez utiliser le onerror en JavaScript pour agir lorsqu'une image ne se charge pas :

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

En jQuery (puisque vous avez demandé) :

$("#myImg").error(function () { 
    $(this).hide(); 
});

Ou pour toutes les images :

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Vous devez utiliser visibility: hidden au lieu de .hide() si le fait de cacher les images risque de modifier la mise en page. De nombreux sites sur le web utilisent une image par défaut "sans image" à la place, en pointant l'option src à cette image lorsque l'emplacement de l'image spécifiée n'est pas disponible.

Answer 3

Pour masquer toute erreur d'image, il suffit d'ajouter ce JavaScript au bas de votre page (juste avant la balise de fermeture body) :

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Answer 4

Il est peut-être un peu tard pour répondre, mais voici ma tentative. Lorsque j'ai été confronté au même problème, je l'ai résolu en utilisant un div de la taille de l'image et en définissant background-image à ce div. Si l'image n'est pas trouvée, le div est rendu transparent, donc tout est fait silencieusement sans code java-script.

Answer 5

Je fais une recherche rapide sur Andy E Il n'est pas possible de live() lier error .

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

Donc tu dois faire comme

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

liant directement le error event handler sur la création d'un nouvel élément.