Substitut d'image | Tutoriel de développement web

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/fonts -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/text_styling -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/margin_and_padding -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/width_and_height -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/display_property -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/positioning -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} css/pseudo_elements -.-> lab-35173{{"Substitut pour les images qui échouent à charger"}} end

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.