Bilder
Fügen Sie Bilder und Icons hinzu, einschließlich solcher mit einer variablenbasierten Quelle.
Legen Sie Inhaltsbilder in public/ ab und referenzieren Sie sie dann mit einem Pfad, der mit / beginnt.
Grundlegende Bilder
Der Text in eckigen Klammern ist der alt-Text des Bildes. Halten Sie ihn beschreibend, da Bildschirmlesegeräte ihn vorlesen und er angezeigt wird, falls das Bild nicht geladen werden kann.
So sieht das aus
Die Seite Bilder und Dateien führt Sie Schritt für Schritt durch das Hinzufügen eines Bildes.
Der image-Tag
Sie können ein Bild auch als Tag schreiben. Er stellt dasselbe einfache Bild dar, und sein src kann eine Variable sein.
{% image src="/images/content-images/artwork.png" alt="Grafik" title="Wird beim Darüberfahren angezeigt" /%}So sieht das aus
| Attribut | Was es bewirkt |
|---|---|
src | Der Pfad zum Bild, beginnend mit /. Erforderlich. |
alt | Der Text, den Bildschirmlesegeräte vorlesen und der angezeigt wird, falls das Bild nicht geladen werden kann. |
title | Der Text, der angezeigt wird, wenn Leser mit der Maus über das Bild fahren. |
Für eine Bildunterschrift unter dem Bild und Vergrößern per Klick verwenden Sie ein erweitertes Bild.
Icons
Icons funktionieren genauso wie jedes andere Bild: Legen Sie die Datei in public/ ab und referenzieren Sie dann ihren Pfad.
public/icons/shield.svgKleine SVGs sind die häufigste Wahl, da sie in jeder Größe scharf bleiben.
Sie fügen ein Icon nicht direkt in den Seitentext ein. Stattdessen nehmen bestimmte Komponenten eine Icon-Datei über ein Attribut entgegen, wie zum Beispiel icon bei einer Karte oder das Icon eines Akteurs in einem Sequenzdiagramm.
Bilder mit Variablen
Manchmal sollte die Quelle eines Bildes aus einem wiederverwendbaren Wert stammen, anstatt direkt geschrieben zu werden, zum Beispiel eine Logo-URL, die sich später ändern könnte. Siehe Variablen, um zu erfahren, wie Sie eine Variable definieren und in einem Bild verwenden.