Heim > Web-Frontend > HTML-Tutorial > So verweisen Sie auf den lokalen Bildpfad in HTML

So verweisen Sie auf den lokalen Bildpfad in HTML

DDD
Freigeben: 2023-08-22 13:13:46
Original
7201 Leute haben es durchsucht

So referenzieren Sie den lokalen Bildpfad in HTML: 1. Verwenden Sie den relativen Pfad. Wenn sich das Bild und die HTML-Datei im selben Ordner befinden, können Sie den Dateinamen des Bildes direkt als relativen Pfad verwenden Sie können absolute Pfade verwenden, dies ist jedoch normalerweise keine bewährte Methode, da absolute Pfade in verschiedenen Umgebungen zu Problemen führen können. Die Base64-Kodierung ist eine Methode zum Konvertieren von Bildern in Textzeichenfolgen Daten können direkt in HTML eingebettet werden.

So verweisen Sie auf den lokalen Bildpfad in HTML

Die Betriebsumgebung dieses Artikels: Windows 10-System, Dell G3-Computer.

Es gibt verschiedene Möglichkeiten, lokale Bildpfade in HTML zu referenzieren, die im Folgenden ausführlich vorgestellt werden.

Relative Pfade verwenden:

Ein relativer Pfad ist ein Pfad relativ zum Speicherort der aktuellen HTML-Datei. Befinden sich Bild und HTML-Datei im selben Ordner, können Sie direkt den Dateinamen des Bildes als relativen Pfad verwenden. Wenn die Bilddatei beispielsweise den Namen „image.jpg“ trägt, können Sie den folgenden Code verwenden, um das Bild in HTML zu referenzieren:

<img src="image.jpg" alt="图片">
Nach dem Login kopieren

Wenn sich die Bilddatei im Ordner der oberen Ebene der aktuellen HTML-Datei befindet, können Sie kann „.../“ verwenden, um den Ordner der oberen Ebene anzugeben. Wenn sich die Bilddatei beispielsweise im Ordner „images“ im Ordner der oberen Ebene befindet, können Sie den folgenden Code verwenden, um auf das Bild zu verweisen:

<img src="../images/image.jpg" alt="图片">
Nach dem Login kopieren

Ähnliches gilt, wenn sich die Bilddatei im Ordner der unteren Ebene befindet In der aktuellen HTML-Datei können Sie „./“ verwenden, um den aktuellen Ordner darzustellen. Wenn sich die Bilddatei beispielsweise im Ordner „images“ des aktuellen Ordners befindet, können Sie den folgenden Code verwenden, um auf das Bild zu verweisen:

<img src="./images/image.jpg" alt="图片">
Nach dem Login kopieren

Verwenden Sie einen absoluten Pfad:

Ein absoluter Pfad ist der vollständige Pfad ausgehend vom Stammverzeichnis. Es ist möglich, absolute Pfade zu verwenden, um auf lokale Bilder zu verweisen. Dies ist jedoch im Allgemeinen keine bewährte Methode, da absolute Pfade in verschiedenen Umgebungen Probleme verursachen können. Wenn Sie jedoch wirklich einen absoluten Pfad verwenden müssen, können Sie den folgenden Code verwenden, um auf das Bild zu verweisen:

<img src="/path/to/image.jpg" alt="图片">
Nach dem Login kopieren

wobei „/pfad/zu/“ der Pfad der Bilddatei relativ zum Stammverzeichnis ist.

Base64-Kodierung verwenden:

Base64-Kodierung ist eine Methode zum Konvertieren von Bildern in Textzeichenfolgen, mit der Bilddaten direkt in HTML eingebettet werden können. Diese Methode eignet sich für kleine Bilder oder wenn Sie HTTP-Anfragen reduzieren müssen. Sie können den folgenden Code verwenden, um das Bild in die Base64-Kodierung zu konvertieren:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QA6RXhpZgAATU0AKgAAAAgABwEAAAQAAABsAAAABAAQAAA
EBAAABAAAAABsAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAAB9AD/2wBDAAoHBwkHBgoJ
Nach dem Login kopieren

Darunter ist der Teil nach „data:image/jpeg;base64“ die Base64-Kodierung des Bildes. Beachten Sie, dass diese Methode die Größe der HTML-Datei erhöht und die Ladegeschwindigkeit der Seite beeinträchtigen kann.

Egal welche Methode Sie verwenden, Sie müssen sicherstellen, dass die Bilddatei im angegebenen Pfad vorhanden ist und dass der Pfad korrekt ist. Darüber hinaus wird empfohlen, die Bilddateien zur einfacheren Verwaltung und Wartung im selben Ordner wie die HTML-Dateien oder in einem speziellen Bildordner abzulegen.

Das obige ist der detaillierte Inhalt vonSo verweisen Sie auf den lokalen Bildpfad in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage