So verweisen Sie auf den lokalen Bildpfad in 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.
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="图片">
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="图片">
Ä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="图片">
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="图片">
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
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



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.

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

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.

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

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

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

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.

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