Comment silencieusement cacher “Image not found” icône lors de la src de l'image source n'est pas trouvé

Savez-vous comment masquer la classique “Image not found” icône à partir d'un rendu HTML de la page lorsqu'un fichier image n'est pas trouvé?

Toute méthode de travail à l'aide de JavaScript/jQuery/CSS?

Andy réponse est correcte, cependant, vous pouvez utiliser le style.vsibility à la place. Si vous définissez la visibilité, l'élément conserve encore sa place sur votre document, donc pas drôle document mouvements.
Je ne vois pas l'intérêt. Vous n'êtes pas censé pour essayer d'atteindre aucun de ressources à partir de votre code html. L'utilisation de javascript pour cacher la mauvaise thématiques ressources semble être une vilaine solution pour moi.
Il vous manque le point.Il y a beaucoup de avec des liens directs images cassé ici, sur un Débordement de Pile en raison du fait que les images peuvent être disponibles au moment de la poste, mais indisponible quelques mois plus tard. Ces images sont silencieusement et doucement cacher.
images brisées posté dans questions montrent l'icône d'image brisée pour moi. Je l'ai juste testé.
Ne serait-il pas le genre de vérifier serverside, que les images existent toujours et à agir de la bonne façon afin de ne pas faire le client d'envoyer inutile s'agit des requêtes http ?
uhm..navigateur? J'utilise FF 3.6.3 et brisé les images sont caché. J'ai essayé IE 8.0 et brisé l'image des icônes affichées à l'écran :S
J'ai testé sous IE et Google Chrome. Il est possible de Firefox cache les images sur son propre si ils ont un vide alt attribut. btw, avez-vous un lien à la question que vous avez vérifié?
assurez-vous .. superuser.com/questions/52671/...
la même page en utilisant StackPrinter (je suis l'auteur) montre les liens cassés sur FF 3.6.3 . C'est la raison pourquoi j'ai posé cette question :). stackprinter.appspot.com/...
Je ne sais pas pourquoi les deux sont traités différemment. j'ai testé une image brisée dans Firefox et Chrome, elle ne s'affiche dans Firefox, mais il montre aussi cassé dans google Chrome. C'est clair que c'est quelque chose de Firefox est de décider de son propre, car il ne semble pas que tous les styles sont les affectent. btw, un grand travail sur StackPrinter.
J'ai trouvé un peu plus d'informations sur comment faire Firefox fonctionne avec le présent. Voir un mise à jour de violon et le [propriétaire pseudo-classe, :-moz-broken ](developer.mozilla.org/en/CSS/:-moz-broken). Je viens de penser à moi-même plus tôt qu'une pseudo classe serait utile pour le style d'images brisées.
merci pour les conseils et pour le +1 là-bas :).
pas de problème 🙂

InformationsquelleAutor systempuntoout | 2010-07-13

95

Vous pouvez utiliser le onerror des événements en JavaScript pour agir quand une image ne se charge pas:
```
var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}
```
En jQuery (puisque 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: hidden au lieu de .hide() si vous cachez les images peuvent changer la mise en page. De nombreux sites sur le web, utiliser une valeur par défaut "aucune image" de l'image au lieu de cela, en soulignant la src attribut de l'image lorsque la localisation de l'image n'est pas disponible.
- c'est que crossbrowser?
- andy - ce qui serait le "global" solution à appliquer à TOUTES les images?? je pense qu'il serait assez facile si ils étaient tous dans le même div - juste demandé au sujet de TOUTES les images dans le document...
- J'étais persuadé qu'il est, mais votre commentaire m'a fait de vérifier. Un rapide Google retourné cette w3schools page (désolé David, si vous lisez ceci) indiquant la croix-prise en charge du navigateur.
- Si vous utilisez jQuery, vous pouvez appliquer le cas pour toutes les images. utilisez simplement le sélecteur de balises, par exemple $("img").error(function () { /*...*/ });.
- E: ça sonne bien, +1. prochaine question intéressante serait, est "error" boundable avec live() ou delegate().
- StackOverflow moteur semble avoir une approche différente, j'ai cherché votre solution sur le master js mais je n'ai pas trouvé .erreur à tous. Savez-vous comment ils s'en sortent?
- merci andy - doh 🙂
- Unfortuantly, il n'est pas possible de live lier la error événement.
- Je suis sûr que vous pouvez utiliser uniquement live() et delegate() pour des événements personnalisés, les événements de la bulle et des événements qui ne sont pas de bulle mais qui ont un bouillonnement d'alternative. Cochez la case [ mises en garde ](api.jquery.com/live/#caveats) la section de la documentation.
- visibility serait mieux, car display peut casser la mise en page.
- Je ne suis pas sûr qu'il y a une autre façon de le gérer. Il y a peut-être quelques astuce que je ne suis pas au courant. Si vous voulez savoir comment quelque chose est mis en œuvre dans le Débordement de la Pile vous pouvez essayer de demander plus de meta.stackoverflow.com.
- il dépend de l'usage, mais visibility serait plus utile. De nombreux sites sur le web pour ne pas, au lieu de permutation de l'image pour un défaut, "pas d'image" de l'image.
- Si vous êtes en utilisant ajax n'importe où que vous allez vouloir l'ajouter à votre petit hack. $.ajaxSetup({complete: function() { $("img").error(function () { $(this).css({visibility:"hidden"}); });} });
InformationsquelleAutor Andy E
109
```
<img onerror='this.style.display = "none"'>
```
- Malheureusement je ne peux pas utiliser cette solution car le contenu html est téléchargé à partir d'un site tiers via Json et je ne peux pas le modifier. Merci quand même.
- Génial, tout ce dont j'avais besoin. Simple et léger, il se glisse dans un modèle!
- chose de la beauté !!!!!! merci @gary
- Ce doit être la accepté de répondre.
- Bien qu'assez ancien déjà, c'est génial! Est-il un moyen de masquer le <a> balises entourant maintenant mon image cachée ainsi?
InformationsquelleAutor Gary Willoughby
4

De faire une recherche rapide sur Andy E's réponse, il n'est pas possible de live() lier error.
```
//won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});
```
De sorte que vous avez à aller comme
```
$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);
```
directement de liaison de la error event handler sur la création d'un nouvel élément.
- +1, la raison pour cela est que le onerror DOM événement n'a pas de bulle. live et déléguer travail en plaçant le gestionnaire d'événement le plus haut dans la hiérarchie DOM et la capture de l'événement, des bulles. Bien sûr, le jQuery développeurs ont travaillé autour de ce pour certains événements comme mise et flou
- E: Ouais, ils ont déjà workedaround que, peut-être pas la pire des idées pour faire quelque chose de similaire pour error. Sonne comme un nice to have pour moi.
InformationsquelleAutor jAndy
4

Il peut être un peu en retard pour répondre, mais voici ma tentative.
Lorsque j'ai fait face à la même question, j'ai fixé à l'aide d'un div de la taille de l'image & réglage de l'image de fond d'écran de cette div. Si l'image n'est pas trouvée, la div est rendu transparent, de sorte que son tout à fait en silence sans java-script code.

InformationsquelleAutor Adway Lele
4

Pour masquer chaque image d'erreur, il suffit d'ajouter ce code 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. 
        }
    }
})();
```
- C'est mon préféré, car il est à peu près assure la onerror les événements sont liés avant que les images ont erronées et que vous n'avez pas à ajouter onerror attributs à chaque balise d'image. Assurez-vous de mettre ce code après tout, votre image de balises, mais avant tout autre code javascript qui est dans <body>, sinon un blocage de la JS externe de charge peut entraîner l'exécution après une image d'erreur.
- Celui-ci fonctionne pour moi, avec les conseils de l'épître aux galates, a besoin de cette JS avant d'exécuter tout ce qui pourrait retarder.
InformationsquelleAutor Q_Mlilo
4

J'ai légèrement modifié solution proposée par Gary Willoughby, car elle explique brièvement image brisée. Ma solution:
```
    <img src="..." style="display: none" onload="this.style.display=''">
```
Dans ma solution image est caché à l'origine et est affiché uniquement quand il est chargé avec succès. Il a un désavantage: les utilisateurs ne verront pas halfloaded images. Et si l'utilisateur a désactivé le JS alors il ne sera plus jamais voir toutes les images
- ...et les utilisateurs ne pourront pas voir quoi que ce soit, si le javascript est désactivé!
- Ainsi, si les utilisateurs qui ont désactivé javascript, le plus utile des applications web ne fonctionne pas de toute façon...
- <img src="..." onerror="this.style.display = 'none'"/> pourrait fonctionner mieux pour les demi-chargé et de non-js navigateur cas?
InformationsquelleAutor Sash
3

j'ai trouvé une chouette méthode pour faire exactement cela, tout en étant toujours en état de fonctionnement lors de l'utilisation de ng-src directive Angular.js et comme...
```
<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />
```
en gros, c'est un plus court GIF transparent (comme on le voit
http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/%5B20121112%5D%20The%20smallest%20transparent%20pixel.html )

bien sûr, ce gif pourrait être gardés à l'intérieur de certains variable globale afin de ne pas gâcher les modèles.
```
<script>
  window.fallbackGif = "..."
</script>
```
et l'utilisation
```
<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />
```
etc.

InformationsquelleAutor Jacek Głodek

Suffit d'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;
}

InformationsquelleAutor Owais Bin Rizwan

Vous devez vous connecter pour publier un commentaire.