Wie man ein Bild zu einem Markdown-Dokument hinzufügt

Visuelle Informationen werden viel leichter und effektiver wahrgenommen als einfacher Text. Deshalb sagt man auch, dass ein Bild mehr sagt als tausend Worte. Vielleicht möchtest du also auch ein Bild zu deinem Dokument oder Blogbeitrag hinzufügen. Im Folgenden findest du ein paar einfache Möglichkeiten, wie du Bilder in eine Markdown-Veröffentlichung oder ein Dokument einfügen kannst.

Markdown ist eine einfache und leicht zu verwendende Auszeichnungssprache, mit der du fast jedes Dokument formatieren kannst. Wenn du mehr darüber erfahren möchtest, lies The Markdown Guide.

So fügst du ein Bild aus einer Datei hinzu

Nehmen wir an, dass sich die Bilder, die du brauchst, im Ordner images befinden:

1
2
3
4
5

 ├─ images
     └─ picture.jpg
     └─ picture-2.jpg
     └─ picture-three.jpg
 ├─ README.md

Wichtig: Wenn der Dateiname Klammern oder andere Sonderzeichen enthält, wird das Bild möglicherweise nicht angezeigt. Wenn du wissen willst, wie du Dateien für Webprojekte richtig benennst, schau dir diese Richtlinien für Dateinamen in Webprojekten an.

Die erste Möglichkeit, ein lokales Bild in ein Markdown-Dokument einzufügen, ist die Verwendung des folgenden Codes:

1

![Bildbeschreibung](/images/picture.jpg)

Der Teil in eckigen Klammern ist der sogenannte alternative Text, der aus den folgenden Gründen wichtig ist:

1. Für die Barrierefreiheit. Bildschirmleseprogramme lesen das. Zum Beispiel für Menschen, die sehbehindert sind.

2. Dieser Text wird anstelle des Bildes angezeigt, wenn die Bilddatei aus irgendeinem Grund nicht geladen werden kann.

3. Er liefert den Kontext und eine Beschreibung des Bildes für Suchmaschinen und hilft ihnen, es zu finden.

Der Teil in Klammern ist der Pfad zur Datei. Beachte das / vor images. Ohne dieses Symbol kann dein Dokument auf deinem Computer normal angezeigt werden, aber sobald es auf einen Server im Internet hochgeladen wird, wird es möglicherweise nicht mehr angezeigt. Das ist einer der Hauptgründe, warum das passiert.

Eine andere Möglichkeit, ein lokales Bild in der Markdown-Veröffentlichung anzuzeigen, ist die Verwendung des Tags “image” im Textkörper deines Dokuments:

1

<image src="/images/picture.jpg" alt="Bildbeschreibung">

Einer der Vorteile dieser Methode ist, dass du auf diese Weise zusätzliche Bildkontrollfunktionen nutzen kannst. Die Einzelheiten hängen von der Ressource ab, auf der du das Dokument veröffentlichst.

Mit beiden Methoden erhältst du die gewünschten Ergebnisse, du hast also die Wahl.

So fügst du ein Bild über einen Link ein

Wenn du ein Bild in ein Dokument einfügen willst, das sich irgendwo im Internet befindet, verwende einfach einen Link zu dem Bild:

1

![Bildbeschreibung](https://picsum.photos/800/600)

oder

1

<image src="https://picsum.photos/800/600" alt="Bildbeschreibung">

So fügst du einem Bild eine Beschriftung hinzu

Füge den Text im Markdown-Code in Anführungszeichen ein, getrennt durch ein Leerzeichen:

1

![Bildbeschreibung](/images/picture.jpg "Bildunterschrift")

Im HTML-Code musst du das Attribut caption:

1
2
3
4

<image
  src="/images/picture.jpg"
  alt="Bildbeschreibung"
  caption="Bildunterschrift">

Wie man einem Bild einen Rahmen hinzufügt

Manchmal musst du einen Rahmen um ein Bild hinzufügen. Zum Beispiel, wenn das Bild und die Seite denselben Hintergrund haben und das Bild visuell abgetrennt werden soll.

Ein Bild im Markdown-Format hat keine Möglichkeit, Designstile hinzuzufügen, daher ist dies hier nicht möglich. Du kannst versuchen, ein spezielles Attribut zum img-Tag hinzuzufügen, wie im folgenden Code:

1

<img src="/images/picture.jpg" border="5px solid red"/>

Aber leider funktioniert auch das nicht. Der Rahmen wird nicht angezeigt.

Trotzdem gibt es eine Lösung, und zwar eine ziemlich ungewöhnliche. Gefunden bei StackOverflow. Alles, was du tun musst, ist, das image-Tag mit einem anderen zu umgeben - kbd:

1
2
3

<kbd>
  <img src="/images/picture.jpg" />
</kbd>

Cool!

😎