Comment puis-je masquer ou remplacer des images cassées à l'aide de CSS et HTML ?

Masquage des espaces réservés aux images brisées avec CSS/HTML

Malgré les limites du CSS et du HTML dans la détection des liens d'images brisés, il existe des solutions de contournement minimes pour masquer ou gérer de tels cas.

Masquage cassé Images

Pour masquer les espaces réservés aux images cassées, vous pouvez utiliser l'attribut onerror dans le fichier tag :

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

Avec cet attribut, lorsqu'une image ne parvient pas à se charger, son affichage sera masqué.

Remplacement par une image de sauvegarde

Vous pouvez également spécifier une image de secours en cas de liens rompus :

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

Lorsqu'une image ne parvient pas à se charger, la source sera basculée sur l'image de secours spécifiée.

Remarque : Bien que CSS et HTML seuls ne puissent pas faire la distinction entre les images cassées et valides, l'attribut onerror peut être utile pour gérer les espaces réservés d'image cassés dans dans les deux cas.

Options supplémentaires

Pour gérer plusieurs images cassées sur votre site, JavaScript fournit une fonctionnalité plus solution robuste. Vous pouvez attacher un écouteur d'événement au DOM et appliquer la même logique à toutes les images de la page :

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

Ce script appliquera le style display: none à toutes les images cassées une fois le DOM complètement chargé.

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!