Comment puis-je masquer les icônes d'images brisées à l'aide de JavaScript, jQuery ou CSS ?

Masquer silencieusement les icônes « Image introuvable » avec JavaScript/jQuery/CSS

Lorsque des images sont manquantes dans une page HTML rendue, la valeur par défaut L'icône « Image introuvable » peut distraire et perturber l'expérience utilisateur. Heureusement, il existe plusieurs méthodes pour masquer cette icône à l'aide de diverses technologies.

JavaScript/jQuery

La méthode la plus simple consiste à utiliser le gestionnaire d'événements onerror. Lorsqu'une image ne parvient pas à se charger, l'événement onerror est déclenché, vous permettant d'exécuter une action personnalisée. L'une de ces actions consiste à masquer l'image :

<img onerror="this.style.display = 'none';" src="path/to/image.png">

CSS

CSS offre une approche plus simple en définissant un style spécifique pour les images qui ne parviennent pas à se charger. À l'aide de la propriété display, vous pouvez définir la visibilité de l'image sur cachée :

img.hide-if-failed {
    display: none;
}

Ensuite, attribuez cette classe à l'image :

<img class="hide-if-failed" src="path/to/image.png">

Utilisation de JavaScript/jQuery pour masquer d'autres éléments

Si l'icône "Image introuvable" est contenue dans un autre élément, tel qu'un div, vous pouvez utiliser JavaScript ou jQuery pour masquer l'élément parent lorsque l'image ne se charge pas :

$('img').on('error', function() {
  $(this).parent().hide();
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!