Comment masquer une image cassée en utilisant uniquement CSS / HTML?

Comment puis-je masquer l'icône d'image cassée? Exemple :

J'ai une image avec l'erreur src:

<img src="Error.src"/>

La solution doit fonctionner dans tous les navigateurs.

Il n'y a aucun moyen pour CSS / HTML de savoir si l'image est un lien cassé, vous devrez donc utiliser JavaScript quoi qu'il arrive

Mais voici une méthode minimale pour masquer 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'"/>

Mettre à 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">

Mise à jour 2

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

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

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

Cela fonctionne également sur tous les navigateurs, même aussi loin que IE8 (sur plus de 250000 visiteurs de sites que j'ai hébergés en septembre 2015, ZERO personnes utilisaient quelque chose de pire que IE8, ce qui signifie que cette solution fonctionne pour littéralement tout. ).

Étape 1: l'image de référence comme un objet au lieu d'un img . Lorsque les objets échouent, ils n'affichent pas d'icônes brisées; ils ne font simplement rien. À partir d'IE8, vous pouvez utiliser les balises Object et Img de manière interchangeable. Vous pouvez redimensionner et faire tout ce que vous pouvez avec des images régulières. N'ayez pas peur de la balise d'objet; c'est juste une balise, rien de gros et d'encombrant n'est chargé et cela ne ralentit rien. Vous utiliserez simplement la balise img sous un autre nom. Un test de vitesse montre qu'ils sont utilisés de manière identique.

Étape 2: (Facultatif, mais génial) Collez une image par défaut à l'intérieur de cet objet. Si l'image que vous souhaitez se charge réellement dans l'objet , l'image par défaut ne s'affiche pas. Ainsi, par exemple, vous pouvez afficher une liste d'avatars d'utilisateurs, et si quelqu'un n'a pas encore d'image sur le serveur, il pourrait afficher l'image d'espace réservé ... pas de javascript ou de CSS requis du tout, mais vous obtenez les fonctionnalités de quoi 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 souhaitez implémenter des images par défaut avec CSS, vous pouvez le rendre encore plus simple dans votre HTML comme ceci ...

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

... et ajoutez simplement le CSS de cette réponse -> https://stackoverflow.com/a/32928240/3196360

J'ai trouvé une excellente solution sur 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">

Si vous ajoutez alt avec le texte alt = "abc", il affichera la vignette corrompue et le message alt abc

<img src="pic_trulli.jpg" alt="abc"/>

Si vous n'ajoutez pas d'alt, il affichera la vignette corrompue

<img src="pic_trulli.jpg"/>

Si vous voulez masquer le cassé, ajoutez simplement alt = "" il n'affichera pas de vignette corrompue ni de message alt (sans utiliser js)

<img src="pic_trulli.jpg" alt=""/>

Si vous voulez masquer celui qui est cassé, ajoutez simplement alt = "" & onerror = "this.style.display = 'none'" il n'affichera pas de vignette corrompue ni de message alt (avec js)

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

Le quatrième est un peu dangereux (pas exactement), si vous voulez ajouter une image dans un événement onerror, il ne s'affichera pas même si Image existe en tant que style.display, c'est comme l'ajout. Alors, utilisez-le lorsque vous n'avez besoin d'aucune image alternative pour afficher.

display: 'none'; // in css

Si nous le donnons en CSS, alors l'élément ne s'affichera pas (comme image, iframe, div comme ça).

Si vous souhaitez afficher l'image et que vous souhaitez afficher un espace totalement vide en cas d'erreur, vous pouvez l'utiliser, mais faites également attention que cela ne prendra pas de place. Donc, vous devez le garder dans un div peut être

Lien https://jsfiddle.net/02d9yshw/

Je pense que le moyen le plus simple est de masquer l'icône d'image cassée par la propriété text-indent.

img {
    text-indent: -10000px
}

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

au cas où vous voudriez garder / avoir besoin de l'image comme espace réservé, vous pouvez changer l'opacité à 0 avec une erreur et du CSS pour définir la taille de l'image. De cette façon, vous ne verrez pas le lien rompu, mais la page se charge normalement.

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

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

J'ai aimé la réponse de Nick et j'ai joué avec cette solution. J'ai trouvé une méthode plus propre. Puisque :: before / :: after pseudos ne fonctionne pas sur les éléments remplacés comme img et object, ils ne fonctionneront que si les données de l'objet (src) ne sont pas chargées. Il maintient le HTML plus propre et n'ajoutera le pseudo que si l'objet ne se charge pas.

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

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

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

Si vous avez besoin de garder le conteneur d'image visible car il sera rempli plus tard et que vous ne voulez pas vous soucier 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"/>

Je l'ai utilisé dans ce but précis. J'avais un conteneur d'image dans lequel une image allait être chargée via Ajax. Parce que l'image était grande et prenait un peu de temps à charger, il fallait définir une image d'arrière-plan en CSS d'une barre de chargement Gif.

Cependant, comme le src du était vide, l'icône d'image cassée apparaissait toujours dans les navigateurs qui l'utilisent.

La définition du Gif 1x1 transparent résout ce problème simplement et efficacement sans ajout de code via CSS ou JavaScript.

Utiliser uniquement du CSS est difficile, mais vous pouvez utiliser des CSS au background-imagelieu de <img>balises ...

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 qui fonctionne .

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

Utilisez la balise d'objet. Ajoutez 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

Depuis 2005 , les navigateurs Mozilla tels que Firefox prennent en charge la :-moz-brokenpseudo-classe CSS non standard qui peut accomplir exactement cette requête:

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

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

img[alt]::beforefonctionne également dans Firefox 64 (même si il était une fois img[alt]::afterdonc ce n'est pas fiable). Je ne peux pas faire fonctionner l'un ou l'autre de ces éléments dans Chrome 71.

Vous pouvez suivre ce chemin 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">

Les images manquantes n'afficheront rien, ou afficheront un [? ] boîte de style lorsque leur source est introuvable. Au lieu de cela, vous voudrez peut-être remplacer cela par un graphique «image manquante» dont vous êtes sûr qu'il existe afin qu'il y ait une meilleure rétroaction visuelle que quelque chose ne va pas. Ou, vous pourriez vouloir le cacher entièrement. Cela est possible, car les images qu'un navigateur ne peut pas trouver déclenchent 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();
   });

De plus, vous souhaiterez peut-être déclencher une sorte d'action Ajax pour envoyer un e-mail à un administrateur du site lorsque cela se produit.

L'astuce avec img::afterest une bonne chose, mais a au moins 2 inconvénients:

1. non pris en charge par tous les navigateurs (par exemple, ne fonctionne pas sur Edge https://codepen.io/dsheiko/pen/VgYErm )
2. vous ne pouvez pas simplement masquer l'image, vous la couvrez - donc pas si utile lorsque vous voulez afficher une image par défaut dans le cas

Je ne connais pas de solution universelle sans JavaScript, mais pour Firefox seulement il y en a une belle:

img:-moz-broken{
  opacity: 0;
}

La même idée que celle décrite par d'autres fonctionne dans React comme suit:

<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>

Un moyen basique et très simple de faire cela sans aucun code requis serait de simplement fournir une instruction alt vide. Le navigateur renverra alors l'image comme vierge. Cela ressemblerait à si l'image n'était pas là.

Exemple:

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

Essayez-le pour voir! ;)

Pour les futurs googleurs, en 2016, il existe un moyen CSS pur et sécurisé pour le navigateur de masquer les images vides à l'aide du sélecteur d'attributs:

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

Edit: Je suis de retour - pour les futurs googleurs, en 2019, il existe un moyen de styliser le texte alternatif et l'image de texte alternatif dans le Shadow Dom, mais cela ne fonctionne que dans les outils de développement. Vous ne pouvez donc pas l'utiliser. Désolé. Ce serait si gentil.

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}