Substitut pour les images qui échouent à charger

Introduction

Dans ce laboratoire, nous allons apprendre à appliquer des styles à l'élément img pour afficher un message d'erreur et l'URL de l'image lorsque le chargement d'une image échoue. Nous utiliserons les pseudo-éléments ::before et ::after pour créer un substitut convivial pour les images qui ne peuvent pas être affichées. À la fin de ce laboratoire, vous serez capable d'améliorer l'expérience utilisateur en fournissant des informations utiles en cas d'échec du chargement d'images.

Substitut pour les images qui échouent à charger

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Lorsque le chargement d'une image échoue, affichez un message d'erreur à l'utilisateur. Pour ce faire, appliquez des styles à l'élément img comme si c'était un conteneur de texte, en définissant son affichage sur block et sa largeur sur 100%. Utilisez les pseudo-éléments ::before et ::after pour afficher respectivement le message d'erreur et l'URL de l'image. Ces éléments ne seront affichés que si le chargement de l'image échoue.

Voici un extrait de code d'exemple :

<img src="https://nowhere.to.be/found.jpg" />

img {
  display: block;
  width: 100%;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  font-family: sans-serif;
  font-weight: 300;
}

img::before {
  content: "Désolé, cette image n'est pas disponible.";
  display: block;
  margin-bottom: 8px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Substitut pour les images qui échouent à charger. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.