Hyperbook Dokumenation

Bild

Um Bilder hinzuzufügen, kannst du dieses Element verwenden. Der Pfad zu lokalen Bildern muss mit einem Slash (/) beginnen. Diese werden vom public-Ordner geladen. Natürlich kannst du auch externe Bilder referenzieren.

![](/test.jpg)

Du kannst auch eine Beschreibung dem Bild hinzufügen. Diese wird für Screenreader verwendet.

![Eine Beschreibung](/test.jpg)

A description

Du kannst auch eine sichtbare Beschreibung dem Bild hinzufügen.

![Eine Beschreibung](/test.jpg "Eine sichtbare Beschreibung")

Eine Beschreibung
Eine sichtbare Beschreibung

Wenn du ein Bild verlinken möchtest, kannst du die normale Link-Syntax verwenden.

[![Eine Beschreibung](/test.jpg "Eine sichtbare Beschreibung")](/elements/alert)

Eine Beschreibung
Eine sichtbare Beschreibung

Wenn dein Hyperbook die basePath Option verwendet, dann wird diese automatisch hinzugefügt.

Position und Gestaltung anpassen

Du kannst die Position und Gestaltung deiner Bilder anpassen, indem du spezielle Zeichen vor oder nach dem Bild-Markdown hinzufügst. Benutzerdefinierte Klassen und Attribute können durch die Verwendung von geschweiften Klammern {} nach dem Bild-Markdown hinzugefügt werden.

![](/test.jpg){#hero .rounded width="200"}

Dies fügt ein Bild mit der ID hero, der Klasse rounded und einer Breite von 200px hinzu.

Dies wird am besten mit benutzerdefinierten CSS-Stilen verwendet.

Du kannst dein Bild auch links, rechts oder zentriert ausrichten, indem du spezielle Zeichen vor oder nach dem Bild-Markdown hinzufügst.

zentriert: ![](/test.jpg)

links: -![](/test.jpg)

links erweitert: --![](/test.jpg)

rechts: ![](/test.jpg)-

rechts erweitert: ![](/test.jpg)--

zentriert erweitert: --![](/test.jpg)--

Du kannst alle Optionen auf dieser Beispielseite überprüfen.

Bild
✎ GitHub© Copyright 2025 by OpenPatch