web-dev-qa-db-fra.com

Comment cacher une image brisée Icône en utilisant uniquement CSS/HTML (sans js)

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

J'ai une image avec l'erreur src:

<img src="Error.src"/>

La solution doit fonctionner dans tous les navigateurs.

En utilisant uniquement CSS ou HTML, pas JS.

htmlcsshtml5css3
128
Geray Suinov

Il n'y a aucun moyen pour CSS/HTML de savoir si l'image est un lien brisé, vous devrez donc utiliser JavaScript quel que soit

Mais il existe 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'"/>

Mettre à jour

Vous pouvez appliquer cette logique à plusieurs images à la fois en procédant comme suit:

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 la totalité de l'image, mais vous modifiez l'aspect de l'icône cassée.

211
Kevin Jantzer

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 simple et faisable avec HTML seulement. 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 depuis IE8 (sur plus de 250 000 visiteurs des sites que j'ai hébergés en septembre 2015, ZERO _ les gens utilisaient quelque chose de pire que IE8, ce qui signifie que cette solution fonctionne pour littéralement tout).

Étape 1: référencez l'image en tant que objet au lieu d'un img. Lorsque les objets échouent, ils ne montrent pas les icônes brisées. ils ne font rien. À partir de IE8, vous pouvez utiliser les balises Object et Img de manière interchangeable. Vous pouvez aussi redimensionner et faire tout ce que vous pouvez avec des images ordinaires. N'ayez pas peur de la balise object; c'est juste une étiquette, rien de gros et d'encombrant ne se charge et ça 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 voulez réellement charge dans l'objet, l'image par défaut ne s'affichera pas. Ainsi, par exemple, vous pouvez afficher une liste d'avatars utilisateur. Si quelqu'un n'a pas encore d'image sur le serveur, il peut également afficher l'image de marque de réservation ... aucun code javascript ou CSS n'est requis, 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 simplifier encore davantage dans votre code 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

112
Nick Steele

Vous avez trouvé une bonne 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">

53
michalzuber

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

img {
    text-indent: -10000px
}

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

13
Burnee

J'ai aimé la répondre par Nick et je jouais avec cette solution. Trouvé une méthode plus propre. Comme les pseudos :: before/:: after ne fonctionnent pas sur les éléments remplacés, tels que img et object, ils ne fonctionneront que si les données de l'objet (src) ne sont pas chargées. Il maintient le code HTML plus propre et n’ajoutera le pseudo que si le chargement de l’objet échoue.

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');
  }
}
12
Bartezz

dans le cas où vous souhaitez conserver/besoin de l'image en tant qu'espace réservé, vous pouvez définir l'opacité sur 0 avec une erreur onerror et des CSS pour définir la taille de l'image. De cette façon, vous ne verrez pas le lien brisé, mais la page se chargera normalement.

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

.img {
    width: 75px;
    height: 100px;
}
11
Ewald Bos

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

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: http://jsfiddle.net/xbK6g/

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

9
Dryden Long

Si vous avez toujours besoin que le conteneur d'image soit visible car il est rempli ultérieurement et que vous ne voulez pas vous soucier de l'afficher et de le masquer, 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'images qui allait y avoir une image chargée via Ajax. Comme l'image était volumineuse et demandait un peu de temps pour se charger, il fallait définir une image de fond en CSS d'une barre de chargement Gif.

Cependant, étant donné que le src de était vide, l'icône d'image endommagée apparaissait toujours dans les navigateurs qui l'utilisaient.

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

6
user2596313

Utilisez la balise object. Ajoutez du 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

2
FinkAvenue

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 d'obtenir un meilleur retour visuel indiquant que quelque chose ne va pas. Ou, vous voudrez peut-être le cacher entièrement. C'est possible, car les images qu'un navigateur ne trouve pas 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();
   });

En outre, vous souhaiterez peut-être déclencher une action Ajax pour envoyer un courrier électronique à un administrateur du site lorsque cela se produit.

2
Ali panahiyan

Depuis le 2005 , les navigateurs Mozilla tels que Firefox prennent en charge la pseudo-classe :-moz-broken 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]::before fonctionne également dans Firefox 64 (bien qu’il fût autrefois img[alt]::after, ce n’est donc pas fiable). Je ne parviens pas à faire fonctionner l'un ou l'autre dans Chrome 71.

1
Adam Katz

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

1
Cenk YAGMUR

Le truc avec img::after est un bon truc, mais il 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 recouvrez - donc inutile si vous voulez afficher une image par défaut dans le cas

Je ne connais pas de solution universelle sans JavaScript, mais pour Firefox uniquement, il existe une solution intéressante:

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

Si vous ajoutez alt avec du texte alt = "abc" , la vignette corrompue sera affichée et le message alt abc

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

 1st 

Si vous n’ajoutez pas alt, la vignette corrompue sera affichée.

<img src="pic_trulli.jpg"/>

 2nd 

Si vous voulez masquer celui qui est cassé, ajoutez simplement alt = "" il n’affichera pas de vignette corrompue ni aucun message alt (sans utiliser js)

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

Si vous voulez masquer le fichier brisé, 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'"/>

4ème est un peu dangereux (pas exactement), si vous souhaitez ajouter une image dans un événement onerror, il ne s'affichera pas même si l'image existe

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

0
P Satish Patro