Bilder

Fügen Sie Bilder 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

![Eine kurze Beschreibung des Bildes](/images/my-image.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.

Die Seite Bilder und Dateien zeigt diesen Schritt im Detail.

Bilder mit Variablen

Wie bei Links wird die Quelle eines einfachen Markdown-Bildes als reiner Text analysiert, sodass eine darin enthaltene Variable nie aufgelöst wird:

Markdown

![Grafik]($IMAGE_LINK)

Dies zeigt den literalen Text $IMAGE_LINK als Bildquelle an, nicht den Wert aus config/variables.yaml.

Wenn eine Bildquelle aus einer Variable stammen muss, verwenden Sie stattdessen den image-Tag. Er ist selbstschließend, da alt ein Attribut und kein Bildinhalt ist:

Markdown

{% image src=$IMAGE_LINK alt="Grafik" /%}

src wird gegen config/variables.yaml aufgelöst, genauso wie {% $variableName %} im laufenden Text. Siehe Variablen, um zu erfahren, wie Sie eine definieren.

Verwenden Sie die Tag-Form nur, wenn die Quelle sich tatsächlich ändern muss — für gewöhnliche statische Bilder ist einfaches Markdown einfacher und funktioniert genauso.

Nächster Schritt

Callouts verwenden.