Bilder

Bilder sind ein wesentlicher Bestandteil des Webdesigns. Sie machen eine Webseite für einen Besucher attraktiv. Sie können einfach in ein HTML-Dokument mit dem <img>-Tag eingefügt werden.

• src: erforderliches Attribut. Sein Wert ist der Pfad zum Speicherort des Bildes. Der Pfad kann absolut und relativ sein;
• alt: erforderliches Attribut. Bietet alternativen Text, der angezeigt werden kann, wenn das Bild nicht gerendert werden kann;
• width und height: gibt die Bildgröße in Pixel an. Ohne diese Attribute wird ein Bild in seiner Originalgröße gerendert.

alt-Attribut

Die Bildbeschreibung sollte informativ und aussagekräftig sein. Sie hilft, das Bild für Menschen zu beschreiben, die sehbehindert sind oder es nicht sehen können. Auf diese Weise liest der Browser das alt-Attribut, und ein Benutzer kann verstehen, warum eine Website dieses Bild hat.

Stellen wir uns das folgende Beispiel vor. Sie haben eine Quelle über Pferderennen. Sie möchten zeigen, wie sich die Teilnehmer auf das Rennen vorbereiten.

Schlechter Wert für das alt-Attribut wäre:

Guter Wert für das alt-Attribut wäre:

Der Alt-Text "Ein Mann auf einem Pferd" ist zu allgemein und fehlt an Kontext. Er bietet eine grundlegende Beschreibung, vermittelt jedoch keine nützlichen Details über die Szene oder den Zweck des Bildes.

src-Attribut

Das src-Attribut kann sowohl absolute als auch relative Pfade verwenden, um den Speicherort der Bilddatei anzugeben.

Absoluter Pfad

Es gibt die vollständige URL der Bilddatei auf dem Webserver an. Zum Beispiel:

Das bedeutet, dass sich die Bilddatei unter dem Link https://example.com/images/image.jpg im Internet befindet. Jeder kann über diesen Link auf das Bild zugreifen.

Bitte inspizieren Sie das folgende reale Beispiel im Code-Sandbox unten:

Hinweis

Um die Dateiverzeichnisstruktur zu untersuchen, ziehen Sie den Schieberegler auf der linken Seite der Code-Sandbox-Oberfläche. In der oberen linken Ecke finden Sie eine Burger-Schaltfläche, die durch drei Streifen dargestellt wird. Durch Klicken auf diese Schaltfläche gelangen Sie zur Dateiverzeichnisorganisation.

Relativer Pfad

Es gibt den Speicherort der Bilddatei relativ zum aktuellen Dokument an. Zum Beispiel:

Das bedeutet, dass sich die Datei image.jpg im Verzeichnis images befindet.

Bitte inspizieren Sie das reale Beispiel im unten bereitgestellten Code-Sandbox. Sie finden den Ordner images, der die Datei sun.png enthält.

Hinweis

Um den Unterschied zwischen relativen und absoluten Pfaden zusammenzufassen: Ein absoluter Pfad stellt den tatsächlichen Link dar, den jeder verwenden kann, um auf ein Bild zuzugreifen. Ein relativer Pfad hingegen ist ein Link im Kontext Ihres eigenen Projekts. Er bezieht sich auf ein lokales Bild und einen Pfad, auf den jeder innerhalb des Projekts zugreifen kann.