web-dev-qa-db-fra.com

Image fictive

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 apparaître mais que l'icône d'image brisée montre comment l'enlever.

Je ne veux pas rendre la page encombrante en ajoutant jquery ou tout autre cadre, mais je ne peux pas non plus ajouter de type div 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);"/>
javascripthtmlcssimage
17
Pradyumna Challa

vous pouvez cacher cela en utilisant ce qui suit:

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

vous pouvez afficher une autre image si l'image ne se trouve pas comme suit:

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

Solution avec 1x1 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);"/>
6
Dmitry Skorinko

Une solution simple consisterait à 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 l'utiliser aussi.

Ce que vous faites, c’est que vous créez une image gif vierge de 1x1 px avec transparence activée, dirigez le fichier "src" vers le fichier blank.gif et transmettez les images via la propriété css background-image . n'est pas trouvé, il ne montrera pas l'image du lien cassé. 

4
Ege

C'est une fonctionnalité de certains navigateurs - pour autant que je puisse m'en souvenir, Firefox, Chrome et Safari ne montrent rien alors qu'Internet Explorer affiche une icône d'image cassée. À part l’utilisation de Javascript, je ne crois pas que vous puissiez remplacer ce comportement.

1
MassivePenguin

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

Ce que vous voulez faire pourrait être traité différemment, cependant ...

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 de la div doivent correspondre à la largeur et à la hauteur de l'image.

1
user166560

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

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

J'utilise des cellules divs pour préserver la mise en page.

0
MannyC

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

1) Utilisez JavaScript pour ajouter un gestionnaire onerror à l’image qui le cache lorsqu’il ne parvient pas à charger en le masquant avec css (vous aurez besoin d’un div contenant pour appliquer la couleur d’arrière-plan car celle-ci ne le sera pas. montrer si l'image est hdden).

Pour appliquer un gestionnaire d'erreurs à chaque image du site sans jQuery et sans modifier le code, vous pouvez le faire (mettez ceci dans un script à la fin de la page - cela ne fonctionnera pas si c'est dans le <head> et vous pourrez ' ne le mettez pas dans window.onload ou il ne se déclenchera pas avant le chargement des images).

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 comme image d'arrière-plan css sur une div au lieu d'utiliser une balise <img>. Ce n'est pas aussi sémantique, mais il ne sera pas afficher une icône d'image cassée si son chargement échoue, et vous pouvez toujours spécifier une couleur d'arrière-plan et une étiquette (pas une balise alt).

0
Nick Lockwood