Wie kann man in Visual Studio Code ein Bild einfügen?

Heute

Melden

Visual Studio Code (VS Code) ist ein sehr beliebter Code-Editor, der vor allem für Webentwicklung verwendet wird.

Wenn man ein Bild in einem Projekt mit VS Code einfügen möchte, kann das je nach Kontext unterschiedlich gemeint sein.

Meistens erfolgt das Einfügen eines Bildes in einem HTML-Dokument, da man mit VS Code häufig an Webseiten arbeitet.

Deshalb wird hier erklärt, wie man in einer HTML-Datei ein Bild im Code hinzufügt und wie man es richtig anzeigt.

Bild in HTML-Datei einfügen

Um ein Bild in HTML einzufügen, verwendet man das <img>-Tag. Dabei ist wichtig, den Pfad zum Bild

korrekt anzugeben. In VS Code selbst kannst du das Bild nicht direkt "einfügen", wie es in einem Textverarbeitungsprogramm

möglich ist, sondern das Bild muss in deinem Projektordner vorhanden sein oder über eine URL eingebunden werden.

Beispiel für die Einbindung eines Bildes im HTML-Code:

Hier ersetzt du pfad/zum/bild.jpg durch den relativen Pfad zu deinem Bild im Projektverzeichnis oder durch

Um das Bild lokal zu verwenden, legst du das Bild in deinem Projektordner ab, zum Beispiel in einem Unterordner namens

images. Dies macht es einfacher, den Pfad zu verwalten. Wenn deine HTML-Datei im Hauptordner liegt, gibst du

In VS Code kannst du einfach den Datei-Explorer benutzen, um dein Bild in den passenden Ordner zu ziehen. Danach kannst du

den Pfad im Code eingeben. VS Code unterstützt außerdem IntelliSense, sodass beim Tippen des Pfades Vorschläge angezeigt werden.

Um zu überprüfen, ob das Bild richtig eingebunden ist, kannst du in VS Code eine HTML-Vorschau verwenden. Zwar bietet VS Code

keine eingebaute Live-Vorschaufunktion, aber durch Erweiterungen wie Live Server kannst du deine HTML-Seite mit eingebundenen

Wenn du mit Markdown arbeitest, kannst du ebenfalls Bilder einfügen, was in VS Code häufig genutzt wird, beispielsweise in einer

! (pfad/zum/bild.jpg)

Auch hier muss das Bild im richtigen Verzeichnis liegen oder über eine URL erreichbar sein. VS Code zeigt die Bildvorschau in

Das Einfügen eines Bildes in Visual Studio Code bedeutet normalerweise, den Pfad zu einem vorhandenen Bild in deinen Code (HTML

oder Markdown) zu schreiben. Du kannst das Bild per Drag & Drop ins Projektverzeichnis einfügen und anschließend im Code darauf

verweisen. Über die Kombination mit Erweiterungen wie Live Server kannst du das Ergebnis schnell live ansehen und überprüfen.