Comment masquer L'image de l'icône cassée en utilisant seulement CSS / HTML (sans js)

il n'y a aucun moyen pour CSS/HTML de savoir si le lien est cassé, donc vous allez devoir utiliser JavaScript peu importe ce que

Mais voici une méthode minimale pour cacher l'image, ou remplacer la source par une sauvegarde.

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

ou

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

mise à Jour

, Vous pouvez appliquer cette logique à plusieurs images à la fois en faisant quelque chose comme ceci:

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

Update 2

Pour un CSS voir michalzuber la réponse de ci-dessous. Vous ne pouvez pas cacher l'image entière, mais vous changez l'apparence de l'icône cassée.

malgré ce que les gens disent ici, vous n'avez pas besoin de JavaScript du tout, vous n'avez même pas besoin de CSS!!

c'est en fait très faisable et simple avec HTML seulement. vous pouvez même afficher une image par défaut si une image ne charge pas . Voici comment...

cela fonctionne également sur tous les navigateurs, même aussi loin que IE8 (sur plus de 250.000 visiteurs aux sites que j'ai accueillis en septembre 2015, zéro les gens ont utilisé quelque chose de pire que IE8, ce qui signifie que cette solution fonctionne pour littéralement tout ).

Étape 1: référencer l'image comme un objet au lieu d'un img . Quand les objets échouent, ils ne montrent pas d'icônes brisées; ils ne font tout simplement rien. À partir de IE8, vous pouvez utiliser les étiquettes objet et Img de façon interchangeable. Vous pouvez redimensionner et faire toutes les choses glorieuses que vous pouvez avec des images régulières aussi. N'ayez pas peur de l'étiquette d'objet; c'est juste une tag, rien de gros et encombrant n'est chargé et ça ne ralentit rien. Vous utiliserez juste l'étiquette img avec un autre nom. Un test de vitesse montre qu'ils sont utilisés de manière identique.

Étape 2: (Facultatif, mais génial) Coller une image par défaut à l'intérieur de cet objet. Si l'image que vous voulez charge effectivement dans l'objet , l'image par défaut ne s'affichera pas. Ainsi, par exemple, vous pouvez afficher la liste des avatars, et si quelqu'un n'a pas un image sur le serveur encore, il pourrait montrer l'image du placeholder... aucun javascript ou CSS requis du tout, mais vous obtenez les caractéristiques de ce qui prend la plupart des gens JavaScript.

voici le code...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... Oui, c'est aussi simple que cela.

si vous voulez implémenter des images par défaut avec CSS, vous pouvez le rendre encore plus simple dans votre HTML comme celui-ci...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

...et il suffit d'ajouter le CSS de cette réponse - > https://stackoverflow.com/a/32928240/3196360

a trouvé une grande solution à https://bitsofco.de/styling-broken-images /

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

j'ai aimé la réponse par Nick et je jouais avec cette solution. Trouvé une méthode plus propre. Depuis ::avant/::après les pseudos ne fonctionnent pas sur remplacer les éléments comme les img et objet ils ne fonctionneront que si l'objet de données (src) n'est pas chargé. Il maintient le HTML plus propre et n'ajoutera le pseudo que si l'objet ne se charge pas.

http://codepen.io/anon/pen/xwqJKQ

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}

utilisant CSS seulement est difficile, mais vous pouvez utiliser CSS background-image au lieu de <img> tags...

quelque chose comme ça:

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

voici un violon de travail: http://jsfiddle.net/xbK6g /

Note: j'ai ajouté la bordure dans le CSS sur le violon juste pour montrer où l'image serait.

je pense que la façon la plus simple est de cacher l'icône de l'image brisée par la propriété text-indent.

img {
    text-indent: -10000px
}

inconsciemment, cela ne fonctionne pas si vous voulez voir l'attribut" alt".

dans le cas où vous aimez garder/avoir besoin de l'image comme un placeholder, vous pouvez changer l'opacité à 0 avec une onerror et quelques css pour définir la taille de l'image. De cette façon, vous ne verrez pas le lien brisé, mais la page se charge normalement.

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

.img {
    width: 75px;
    height: 100px;
}

si vous avez besoin d'avoir encore le conteneur d'image visible en raison du fait qu'il est rempli plus tard et que vous ne voulez pas prendre la peine de le montrer et de le cacher, vous pouvez coller une image transparente 1x1 à l'intérieur du src:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

j'ai utilisé ceci dans ce but précis. J'avais un container d'image qui allait avoir une image chargée dans lui via Ajax. Parce que l'image était grande et prenait un peu à charger, il a exigé le réglage d'une image de fond dans CSS de une barre de chargement Gif.

cependant, parce que le src de l'était vide, l'icône de l'image cassée apparaissait encore dans les navigateurs qui l'utilisent.

définir le GIF transparent 1x1 corrige ce problème simplement et efficacement sans ajout de code par CSS ou JavaScript.

les images manquantes soit n'afficheront rien, soit afficheront un [ ? ] boîte de style lorsque leur source est introuvable. Au lieu de cela, vous voudrez peut-être remplacer cela par une "image manquante" graphique que vous êtes sûr existe donc il ya une meilleure rétroaction visuelle que quelque chose ne va pas. Ou, vous pouvez le masquer entièrement. C'est possible, parce que les images qu'un navigateur ne peut pas trouver tirent sur un événement JavaScript "d'erreur" que nous pouvons surveiller.

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

en outre, vous pouvez vous souhaitez déclencher une action Ajax pour envoyer un e-mail à un administrateur du site lorsque cela se produit.

vous pouvez suivre cette voie comme une solution css

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

utilisez l'étiquette objet. Ajouter un texte alternatif entre les balises comme ceci:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

pour les futurs googleurs, en 2016 Il ya un navigateur sûr CSS pur moyen de cacher des images vides en utilisant le sélecteur d'attribut:

img[src="Error.src"] {
    display: none;
}

une façon basique et très simple de faire cela sans aucun code requis serait de simplement fournir une déclaration alt vide. Le navigateur retournera alors l'image vide. Ça ressemblerait à si l'image n'était pas là.

exemple:

<img class="img_gal" alt="" src="awesome.jpg">

Essayez pour voir! ;)