Javascript Girl
  1. Javascript Girl
  3. Comment puis-je masquer les images brisées en javascript?
Intereting Posts
En utilisant javascript pour définir la valeur du champ caché, accédez à la valeur à partir du code C # du serveur Pourquoi mes paramètres ne sont-ils pas transmis à un événement expédié? Ouvrez une nouvelle Outlook à partir du site Web, trop longtemps MailTo Link, * .eml fichier bcc field not loaded Comment les navigateurs géreront la syntaxe d'importation / exportation ES6 Comment puis-je obtenir la hauteur de la ligne de base d'une certaine police? Navigation URL Hash avec un Flexslider Jshint – Créer des mises en garde / règles personnalisées Regex compare les chaînes avec les variations Umlaut et Non-Umlaut Quand est-il nul ou indéfini utilisé dans JavaScript? Bug avec JSON.parse Javascript? Utilisation de l'inspecteur des noeuds avec des tâches Grunt Ajouter les données de json au tableau existant Regex pour faire correspondre le nom de fichier à la fin de l'URL Forcer le mode d'orientation "Paysage" Le service AngularJS réessaie lorsque la promesse est rejetée

Comment puis-je masquer les images brisées en javascript?

J'ai une image dans une déclaration if: 

if (item.image) historyHtml += '<a href=' + item.image + ' class="image" target="_blank"><img src="' + item.image +'" width="111px"/></a>';

Vous pouvez utiliser le gestionnaire Onerror. Dans la forme en ligne, cela ressemble à ceci: 

 <img src="someimage.jpg" onerror="this.style.display='none';" />

Comme le dit @piskvor, le chargement de l'image dans une balise img est le seul moyen de savoir si l'URL est brisée ou non. L'événement d' error est déclenché si le chargement échoue.

Mais en regardant votre code, peut-être que l'approche opposée a plus de sens: Cacher le <a> par défaut et le montrer dans l'événement onload de l'image.

Abrégé: 

 <a href=".." id="image228" style="display: none"> <img src="..." onload="this.parentNode.style.display = 'block'"> </a>