Image réservée

J'ai défini la balise d'image avec une couleur d'arrière-plan, de sorte que s'il n'y a pas d'image, la couleur doit s'afficher, mais l'icône de l'image cassée montre-t-elle comment supprimer cette image?

Je ne veux pas rendre la page volumineuse en ajoutant jquery ou n'importe quel cadre, et je ne peux pas ajouter n'importe quel genre de divs aux images car le site est presque terminé.

Trouvé la réponse avec seulement javascript

function ImgError(source){ source.src = "/images/noimage.gif"; source.onerror = ""; return true; } <img src="someimage.png" onerror="ImgError(this);"/>

Vous pouvez cacher cela à l'aide des éléments suivants:

 <img src="my.png" onerror="this.style.display='none'" />

Vous pouvez afficher une autre image si l'image n'est pas trouvée comme suit:

 <img src="my.png" onerror="this.src = 'image-not-found.png';" />

Solution avec 1×1 png vide

  function ImgError(source){ empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII="; source.src = "data:image/png;base64," + empty1x1png; source.onerror = ""; return true; } <img src="someimage.png" onerror="ImgError(this);"/>

Une solution simple serait d'utiliser, littéralement, une image vierge d'espace réservé. Ceci est généralement utilisé pour les sprites, mais je pense que vous pourriez utiliser cela aussi.

Ce que vous faites est que vous créez une image gif 1×1 px vierge avec transparence activée, diriger l'attribution "src" vers le fichier blank.gif et donner les images via la propriété css background-image. Par conséquent, même si l'image d'arrière-plan n'est pas trouvée, elle ne montrera pas l'image de lien cassée.

C'est une caractéristique de certains navigateurs – pour autant que je me souvienne, Firefox, Chrome et Safari ne montrent rien alors que Internet Explorer affiche une icône d'image cassée. En l'absence d'utilisation de Javascript, je ne crois pas que vous puissiez remplacer ce comportement.

Le navigateur fait cette icône d'image brisée. Ce n'est pas quelque chose que vous pouvez changer dans le code. Je pense que vous constaterez que les différents navigateurs gèrent les images manquantes différemment.

Ce que vous voulez faire pourrait être manipulé différemment …

Style:

 div.image-maybe-missing { width: 300px; height: 450px; background-color: red; background-image: url("/images/is-it-there.png"); }

HTML:

 <div class="image-maybe-missing"> </div>

Cela vous donnera une boîte vide avec un fond rouge si l'image n'est pas présente. La largeur et la hauteur du div doivent correspondre à la largeur et à la hauteur de l'image.

C'est un comportement dépendant du navigateur, mais vous ne pouvez rien faire à ce sujet. Voici quelques options:

1) Utilisez JavaScript pour ajouter un gestionnaire Onerror à l'image qui le cache quand il ne parvient pas à le charger en le configurant à l'aide de css (vous devrez avoir un div divisé pour appliquer la couleur d'arrière-plan car la couleur de fond ne sera pas Montre si l'image est hdden).

Pour appliquer un gestionnaire d'erreur à chaque image du site sans jQuery et sans modifier le code, vous pouvez le faire (placez-le dans un script à la fin de la page – il ne fonctionnera pas si c'est dans la <head> et vous Ne peut pas le mettre dans window.onload ou il ne s'allume pas avant que les images ne soient chargées).

 var images = document.getElementsByTagName('img'); for (i = 0; i < images.length; i++) { images[i].onerror = function() { this.style.visibility = 'hidden'; } }

2) Définissez l'image sous la forme de l'image de fond css sur un div au lieu d'utiliser une <img> . Ce n'est pas aussi sémantique, mais il ne affichera pas une icône d'image cassée si elle ne parvient pas à charger, et vous pouvez toujours spécifier une couleur d'arrière-plan et une étiquette (pas une balise alt).

Essayez this.remove () pour supprimer l'espace réservé image brisée:

 <div class="cell"> <p> <img src="pic.png" onerror="this.remove();" /> </p> </div>

J'utilise les divs cellulaires pour préserver la mise en page.