web-dev-qa-db-fra.com

Comment masquer silencieusement l'icône "Image introuvable" 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é?

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

javascriptjqueryhtmlcssimage
86
systempuntoout

Vous pouvez utiliser l'événement onerror en JavaScript pour agir lorsqu'une image ne se charge pas:

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

Dans jQuery (depuis que 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 masquage des images peut changer la mise en page. De nombreux sites Web utilisent à la place une image "aucune image" par défaut, en pointant l'attribut src vers cette image lorsque l'emplacement de l'image spécifié n'est pas disponible.

97
Andy E
<img onerror='this.style.display = "none"'>
111
Gary Willoughby

J'ai légèrement modifié la solution suggérée par Gary Willoughby, car elle montre brièvement une image brisée. Ma solution:

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

Dans ma solution, l'image est initialement masquée et n'apparaît que lorsqu'elle est chargée avec succès. Cela a 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.

4
Sash

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

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

Il est peut-être un peu tard pour répondre, mais voici ma tentative. Lorsque j'ai rencontré le même problème, j'ai résolu le problème en utilisant un div de la taille de l'image et en configurant une image d'arrière-plan avec ce div. Si l'image n'est pas trouvée, la div est rendue transparente, donc tout est fait en mode silencieux sans code de script Java.

4
Adway Lele

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

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

Donc, vous devez 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 handler sur la création d'un nouvel élément.

4
jAndy

j'ai trouvé une méthode astucieuse pour faire exactement cela, tout en restant fonctionnel lors de l'utilisation de ng-src directive dans Angular.js et comme ...

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

il s’agit en principe d’un fichier GIF transparent le plus court (voir http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%) D1% 82% D0% B5% D1% 80/[20121112]% 20The% 20smallest% 20transparent% 20pixel.html )

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

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

et utilise

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

etc.

3
Jacek Głodek

Juste utiliser 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;
}
0
Owais Bin Rizwan