Utilisez le :: après le pseudo-élément de CSS pour écraser l'ic?ne d'image cassée par défaut et afficher le texte ou les ic?nes personnalisés via le positionnement; 2. Combiné avec JavaScript pour écouter les événements ONERROR, ajoutez des noms de classe spécifiques aux images endommagées pour appliquer des images ou des styles d'arrière-plan; 3. Utilisez le script Inerror en ligne directement dans HTML pour remplacer la source d'image échouée par la carte d'emplacements d'espace de place par défaut, réalisant ainsi l'affichage de l'interface utilisateur amicale.

Lorsqu'une image ne se charge pas, les navigateurs affichent une ic?ne d'image cassée par défaut. Bien que vous ne puissiez pas styliser directement l'ic?ne de l'image brisée elle-même (elle est rendue par le navigateur), vous pouvez la masquer et la remplacer par du contenu de secours personnalisé à l'aide de techniques CSS et HTML.

Voici comment gérer et styliser une sel-arrière pour les images cassées:

1. Masquer l'image cassée et afficher le texte ou l'ic?ne de secours

Vous pouvez masquer l'image cassée et afficher du contenu personnalisé (comme du texte ou une ic?ne d'espace réservé) en utilisant le ::before ou ::after les pseudo-éléments.

HTML:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175461264753225.jpeg"  class="lazy"  src = "manquer-image.jpg" alt = "product" class = "image-fallback">

CSS:

 .image-fallback {
  Largeur: 200px;
  hauteur: 150px;
  FIT d'objet: couverture;
  Font-Family: ?Arial?, Sans-Serif;
  taille de police: 14px;
  Couleur: transparent;
  Border: 2px solide #ddd;
  Border-Radius: 6px;
  Position: relative;
  Contexte: # F7F7F7;
}

.image-fallback :: après {
  Contenu: "Image non disponible";
  Position: absolue;
  en haut: 50%;
  Gauche: 50%;
  Transformer: traduire (-50%, -50%);
  Couleur: # 888;
  taille de police: 12px;
  Espace blanc: Nowrap;
  Z-Index: 1;
}

.image-fallback [src * = ""],
.image-fallback: pas ([src]) {
  Opacité: 0;
}

Remarque: L'élément ::after Element n'appara?t que si l'image ne se charge pas et que le navigateur rend toujours la balise <img alt="Comment coiffer une ic?ne d'image cassée dans CSS" > . L'astuce repose sur le positionnement du contenu de secours sur la zone d'image.

2. Utilisez JavaScript pour remplacer les images cassées

étant donné que CSS seul ne peut pas détecter les erreurs de chargement d'image, la combiner avec JavaScript donne un meilleur contr?le.

Javascript:

 document.QuerySelectorall ('img'). foreach (img => {
  img.onerror = () => {
    img.src = ''; // effacer le SRC non valide
    img.classlist.add ('brisé');
  };
});

Maintenant, lorsqu'une image échoue, il obtient une classe broken .

CSS pour la classe brisée:

 img.broken {
  Contexte: # f0f0f0 URL (&#39;Données: image / svg xml; utf8, <svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" Viewbox = "0 0 24 24" fill = "# ccc"> <chemin d = "m19 5v14h5v5h14m0 0-2 .9-2 2V14C0 1.1.9 2 2 2H14C1.1 0 2-.9 2-2V5C0-1.1-. 2V7H10.4ZM-4.3-4.3C.8 0 1.5-.7 1.5-1.5S14.2 7 13,4 7 11,9 7,7 11,9 8,5.7 1,5 1,5 1,5z ?/> </ svg> &#39;) Centre / 40px non répété;
  Border: 1px en pointillé #ccc;
  Couleur: #AAA;
}

img.broken :: après {
  Contenu: "Image manquant";
  Position: absolue;
  en haut: 50%;
  Gauche: 50%;
  Transformer: traduire (-50%, -50%);
  taille de police: 12px;
}

Cette méthode donne un contr?le complet - vous pouvez utiliser un SVG d'arrière-plan, une couleur d'espace réservé ou même une image par défaut.

3. Alternative: utilisez une image par défaut comme report

Au lieu de styliser du texte, échangez dans une image par défaut lorsque l'original échoue.

 <img src = "photo.jpg" onerror = "this.onerror = null; this.src = &#39;placeholder.jpg&#39;;" alt = "Exemple de secours">

Il s'agit d'une solution en ligne concise. Le this.onerror=null empêche les boucles infinies si l'image de secours échoue également.

Résumé

• Vous ne pouvez pas styliser directement l'ic?ne d'image cassée du navigateur .
• Utilisez CSS avec ::after pour superposer le texte de secours / l'ic?ne.
• Combinez avec JavaScript pour une détection fiable.
• Utilisez onerror pour échanger dans une image par défaut.

Avec ces techniques, vous pouvez créer une expérience de secours propre et conviviale.

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!