Bild in HTML aus einem Ordner hinzufügen

1. Verwenden Sie das Tag <img>, um ein Bild aus einem Ordner in HTML hinzuzufügen
2. Verwenden Sie die CSS-Eigenschaft background-image, um ein Bild aus einem Ordner in HTML hinzuzufügen

In diesem Artikel werden verschiedene Möglichkeiten zum Hinzufügen eines Bilds aus einem Ordner in HTML untersucht.

Verwenden Sie das Tag <img>, um ein Bild aus einem Ordner in HTML hinzuzufügen

Wenn Sie ein Bild lokal in Ihrem System gespeichert haben, können Sie es einfach zu HTML hinzufügen. Sie können das Tag <img> verwenden und den Pfad des Bildes im Attribut src angeben.

Obwohl die Schritte einfach sind, wird das Bild manchmal nicht auf der Webseite angezeigt. Das Problem tritt meistens auf, weil der Bildpfad falsch ist und der Browser das Bild nicht finden kann.

Daher müssen Sie im Attribut src den richtigen Bildpfad angeben.

Betrachten wir die folgende Struktur.

HTML_project
├── image1.jpg
└── index.html

Hier befinden sich die HTML-Datei und das Bild im selben Verzeichnis.

Erstellen Sie beispielsweise das Tag <img> und schreiben Sie den Pfad image1.jpg, um ein Bild einzufügen. Mit dem Attribut alt können Sie einen Alternativtext hinzufügen.

In einigen Fällen wird das Bild möglicherweise nicht angezeigt. Es wäre also sinnvoll, den Benutzern mitzuteilen, worum es in dem Bild geht.

Wenn das Bild angezeigt wird, wird der alternative Text nicht angezeigt. Beachten Sie, dass <img> kein schließendes Tag hat.

Beispielcode:

<img src="image1.jpg" alt="Mango Tree">

Das Bild und die HTML-Datei befinden sich im obigen Beispiel im selben Pfad. Daher haben wir nur den Dateinamen in das Attribut src geschrieben.

Betrachten wir ein anderes Szenario, in dem ein Bild in einem Verzeichnis gespeichert wird.

HTML_project
├── images
│   └── image1.jpg
└── index.html

Für eine solche Struktur können wir den Pfad des Bildes auf zwei Arten festlegen.

Beispielcode:

<img src="images/image1.jpg" alt="Mango Tree">

Hier weist der angegebene Pfad den Browser an, nach einem Verzeichnis namens images im selben Verzeichnis zu suchen, in dem sich index.html befindet. Als nächstes sucht der Browser das Verzeichnis images und findet darin image1.jpg.

Somit wird das Bild im Browser angezeigt.

Beispielcode:

<img src="./images/image1.jpg" alt="Mango Tree">

Hier zeigt das ./ am Anfang des Pfads das aktuelle Verzeichnis ab dem Speicherort von index.html an, das HTML_project ist. Dann wird das Verzeichnis images gefunden und image1.jpg zur Webseite hinzugefügt.

Verwenden Sie die CSS-Eigenschaft background-image, um ein Bild aus einem Ordner in HTML hinzuzufügen

Diese Methode erklärt die andere Möglichkeit, ein Bild in HTML hinzuzufügen. Die Pfadkonvention für Bilddateien ähnelt jedoch der ersten Methode.

Der einzige Unterschied besteht darin, dass wir anstelle des Tags <img> die CSS-Eigenschaft background-image verwenden.

Lassen Sie uns Code schreiben, um das Bild mit CSS für die folgende Struktur hochzuladen.

HTML_project
├── image1.jpg
└── index.html

Beispielcode:

<div class = "div1" style="background-image: url('image1.jpg'); height: 200px; width: 200px;">

Das obige Code-Snippet erstellt ein Hintergrundbild mit einer Höhe und Breite von 200px.

Betrachten wir in ähnlicher Weise die folgende Struktur.

HTML_project
├── html
│   └── index.html
└── images
    └── image1.jpg

Beispielcode:

<div class = "div1" style="background-image: url('../images/image1.jpg'); height: 200px; width: 200px;">

../ bedeutet hier, sich im Verzeichnisbaum einen Schritt zurück zu bewegen. Das bedeutet, dass Sie vom Verzeichnis images in das Verzeichnis HTML_project gewechselt sind, wo Sie das Verzeichnis images und darin die Datei image1.jpg finden.

Abschließend wird das Bild angezeigt.

So können Sie HTML und CSS mit dem richtigen Bildpfad verwenden, um ein Bild aus dem Ordner in HTML hinzuzufügen.