Alternative für Bilder, die nicht geladen werden können

Einführung

In diesem Lab werden wir lernen, wie wir Stile auf das img-Element anwenden, um eine Fehlermeldung und die Bild-URL anzuzeigen, wenn ein Bild nicht geladen werden kann. Wir werden die pseudo-Elemente ::before und ::after verwenden, um eine benutzerfreundliche Alternative für Bilder zu erstellen, die nicht angezeigt werden können. Am Ende dieses Labs werden Sie in der Lage sein, die Benutzererfahrung zu verbessern, indem Sie hilfreiche Informationen im Falle eines Bildladefehlers bereitstellen.

Alternative für Bilder, die nicht geladen werden können

index.html und style.css wurden bereits in der VM bereitgestellt.

Wenn ein Bild nicht geladen werden kann, wird der Benutzer eine Fehlermeldung angezeigt. Um dies zu tun, wenden Sie Stile auf das img-Element an, als wäre es ein Textcontainer, und legen Sie seine Anzeige auf block und seine Breite auf 100% fest. Verwenden Sie die pseudo-Elemente ::before und ::after, um die Fehlermeldung und die Bild-URL jeweils anzuzeigen. Diese Elemente werden nur angezeigt, wenn das Bild nicht geladen werden kann.

Hier ist ein Beispielcodeausschnitt:

<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: "Sorry, this image is unavailable.";
  display: block;
  margin-bottom: 8px;
}

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

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Alternative für Bilder, die nicht geladen werden können" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.