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

So verweisen Sie auf den lokalen Bildpfad in HTML

Aug 22, 2023 pm 01:13 PM
html

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles