Comment masquer silencieusement l'icône «Image non trouvée» lorsque l'image source src n'est pas trouvée

Savez-vous comment masquer l' icône classique "Image non trouvée" d'une page HTML rendue lorsqu'un fichier image n'est pas trouvé?

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

Vous pouvez utiliser l' onerrorévénement dans JavaScript pour agir lorsqu'une image ne parvient pas à se charger:

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

Dans jQuery (depuis que vous l'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: hiddenau lieu de .hide()si le fait de masquer les images peut modifier la mise en page. De nombreux sites sur le Web utilisent à la place une image "sans image" par défaut, pointant l' srcattribut vers cette image lorsque l'emplacement de l'image spécifié n'est pas disponible.

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

J'ai légèrement modifié la solution suggérée par Gary Willoughby, car elle montre brièvement l'icône d'image cassée. Ma solution:

    <img src="..." style="display: none" onload="this.style.display=''">

Dans ma solution, l'image est masquée initialement et ne s'affiche que lorsqu'elle est chargée avec succès. Cela présente un inconvénient: les utilisateurs ne verront pas les images à moitié chargées. Et si l'utilisateur a désactivé JS, il ne verra jamais aucune image

Pour masquer chaque erreur d'image, ajoutez simplement ce JavaScript en bas de votre page (juste avant la balise de fermeture du corps):

(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. 
        }
    }
})();

Il est peut-être un peu tard pour répondre, mais voici ma tentative. Lorsque j'ai rencontré le 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 sur ce div. Si l'image n'est pas trouvée, le div est rendu transparent, donc tout est fait en silence sans code java-script.

Faire une recherche rapide sur la réponse d' Andy E , il n'est pas possible de live()lier error.

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

Alors tu dois aller comme

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

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

J'ai trouvé une méthode astucieuse pour faire exactement cela, tout en étant toujours fonctionnel lors de l'utilisation de la ng-srcdirective dans Angular.js et autres ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

c'est fondamentalement un GIF transparent le plus court (comme vu http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20Le% 20smallest% 20transparent% 20pixel.html )

bien sûr, ce gif pourrait être conservé dans une variable globale pour ne pas gâcher les modèles.

<script>
  window.fallbackGif = "..."
</script>

et utilise

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

etc.

Utilisez simplement un CSS simple

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}