Bilder

Fügen Sie Bilder und Icons hinzu, einschließlich solcher mit einer variablenbasierten Quelle.

1 MIN READ

Legen Sie Inhaltsbilder in public/ ab und referenzieren Sie sie dann mit einem Pfad, der mit / beginnt.

Grundlegende Bilder

Markdown

![Grafik](/images/content-images/artwork.png)

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.

Icons

Icons funktionieren genauso wie jedes andere Bild: Legen Sie die Datei in public/ ab und referenzieren Sie dann ihren Pfad.

Text

public/icons/shield.svg

Kleine 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.

Nächster Schritt

Callouts verwenden.