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

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

J’ai une image avec erreur src:

 

La solution doit fonctionner sur tous les navigateurs.

Utiliser uniquement CSS ou HTML, pas JS.

Il n’y a aucun moyen pour CSS / HTML de savoir si l’image est un lien cassé, vous devrez donc utiliser JavaScript, peu importe

Mais voici une méthode minimale pour masquer l’image ou remplacer la source par une sauvegarde.

  

ou

  

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.onhttps://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/error = function(){this.style.display='none';}; }) }); 
     

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 se charge pas . Voici comment…

Cela fonctionne également sur tous les navigateurs, même depuis IE8 (sur plus de 250 000 visiteurs vers des sites que j’ai hébergés en septembre 2015, les utilisateurs de ZERO utilisaient quelque chose de pire qu’IE8, ce qui signifie que cette solution fonctionne littéralement ).

Étape 1: Référencez l’image en tant qu’object au lieu d’un img . Lorsque les objects échouent, ils ne montrent pas les icons brisées. ils ne font rien. À partir d’IE8, vous pouvez utiliser les balises Object et Img de manière interchangeable. Vous pouvez également redimensionner et faire tout ce que vous pouvez avec des images régulières. N’ayez pas peur de l’object tag; c’est juste une étiquette, rien de gros et d’encombrant n’est chargé 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 dans cet object. Si l’image que vous souhaitez charger réellement dans l’object , l’image par défaut ne sera pas affichée. Ainsi, par exemple, vous pourriez afficher une liste d’avatars d’utilisateur, et si une personne n’a pas encore d’image sur le serveur, elle pourrait afficher l’image de substitution … aucun javascript ou CSS requirejs du tout, mais vous obtenez les caractéristiques de prend la plupart des gens JavaScript.

Voici le code …

    

… Oui, c’est aussi simple que ça.

Si vous souhaitez implémenter des images par défaut avec CSS, vous pouvez le rendre encore plus simple dans votre code HTML comme celui-ci …

  

… 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-https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/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); } 
  
A https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/broken image
A bird

J’ai aimé la réponse de Nick et j’ai joué avec cette solution. Trouvé une méthode plus propre. Étant donné que :: before / :: after pseudos ne fonctionne pas sur les éléments remplacés comme img et object, ils ne fonctionneront que si les données d’object (src) ne sont pas chargées. Il garde le HTML plus propre et appenda seulement le pseudo si l’object ne parvient pas à charger.

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

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

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 } 

Sérieusement, cela ne fonctionne pas si vous voulez voir l’atsortingbut “alt”.

Utiliser uniquement CSS est difficile, mais vous pouvez utiliser background-image de CSS au lieu de balises

Quelque chose comme ça:

HTML

 

CSS

 #image { background-image: url(https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/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 uniquement pour montrer où l’image serait.

Si vous souhaitez conserver / avoir besoin de l’image en tant qu’espace réservé, vous pouvez changer l’opacité à 0 avec une erreur et un peu de CSS pour définir la taille de l’image. De cette façon, vous ne verrez pas le lien cassé, mais la page se charge normalement.

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

Si vous devez toujours avoir le conteneur d’image visible parce qu’il sera rempli plus tard et que vous ne voulez pas montrer et le cacher, vous pouvez coller une image transparente 1×1 à l’intérieur du src:

J’ai utilisé ceci pour ce but précis. J’avais un conteneur d’images qui allait recevoir une image via Ajax. Comme l’image était volumineuse et nécessitait un peu de chargement, il fallait définir une image d’arrière-plan dans CSS d’une barre de chargement Gif.

Cependant, le src du fichier étant vide, l’icône d’image cassée apparaît toujours dans les navigateurs qui l’utilisent.

Configurer le Gif 1×1 transparent résout ce problème simplement et efficacement sans ajout de code via CSS ou JavaScript.

Les images manquantes afficheront simplement 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, de sorte qu’il existe un meilleur retour visuel indiquant 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').https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/error(function(){ $(this).attr('src', 'missing.png'); }); //Or, hide them $("img").https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/error(function(){ $(this).hide(); }); 

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

Vous pouvez suivre ce chemin en tant que 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; } 
  

Utilisez la balise object. Ajoutez un texte alternatif entre les balises comme ceci:

 Alternative Text 

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

Pour les futurs googleurs, en 2016, il existe un moyen CSS sûr de masquer les images vides au moyen du sélecteur d’atsortingbuts:

 img[src="http://soffr.miximages.com/html/Error.src"] { display: none; } 

Un moyen simple et très simple de le faire sans code requirejs serait de fournir une instruction alt vide. Le navigateur renverra alors l’image en blanc. Cela ressemblerait à si l’image n’est pas là.

Exemple:

  

Essayez-le pour voir! ;)