Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung

1. Absoluter Pfad

Zunächst einmal bezieht sich der absolute Pfad einer Datei auf dem lokalen Computer natürlich auf den Pfad, unter dem die Datei tatsächlich auf der Festplatte vorhanden ist.

Dieser Pfad: D:/wamp/www/img/icon.jpg sagt uns beispielsweise, dass sich die Datei icon.jpg im Unterverzeichnis img unter dem Verzeichnis wamp auf Laufwerk D befindet. Um den Speicherort der Datei anhand des absoluten Pfads zu ermitteln, müssen wir keine weiteren Informationen kennen.

Es gibt auch Hyperlink-Dateispeicherorte, bei denen es sich ebenfalls um absolute Pfade handelt, z. B. upload/2022/web/icon.jpg.

Hinweis: Manchmal funktioniert die bearbeitete Seite einwandfrei, wenn Sie sie auf Ihrem eigenen Computer durchsuchen, aber es ist sehr wahrscheinlich, dass die Bilder nicht angezeigt werden, wenn Sie sie auf einen Webserver hochladen. Da statische HTML-Seiten auf die Website hochgeladen werden müssen und wir in der Website-Anwendung normalerweise "/" verwenden, um das Stammverzeichnis darzustellen, bedeutet /img/icon.jpg, dass sich die Datei photo.jpg im Verzeichnis img im Stammverzeichnis dieser Website befindet. Sie sollten jedoch wissen, dass es sich bei dem hier genannten Stammverzeichnis nicht um das Stammverzeichnis Ihrer Website handelt, sondern um das Stammverzeichnis des Webservers, auf dem sich Ihre Website befindet. Denn beim Hochladen auf den Webserver wird die gesamte Website möglicherweise nicht auf dem Laufwerk D des Webservers abgelegt, sondern möglicherweise auf dem Laufwerk F oder H. Auch wenn es auf dem Laufwerk D des Webservers abgelegt ist, ist das Verzeichnis „D:/wamp/www/img“ auf dem Laufwerk E des Webservers möglicherweise nicht vorhanden, sodass das Bild beim Durchsuchen der Webseite nicht angezeigt wird. Dies ist auch das Risiko bei der Verwendung absoluter Pfade.

2. Relativer Pfad

Der relative Pfad ist, wie der Name schon sagt, die relative Position des Pfades zum Ziel.

Angenommen, der Seitenname, in den Sie die Datei importieren möchten, lautet test.htm und sie befindet sich in einem Ordner namens www (absoluter Pfad D:/wamp/www/test.htm). Dann verweisen Sie auf die Datei „icon.jpg“, die sich auch im Ordner www (absoluter Pfad D:/wamp/www/icon.jpg) befindet, und zwar im relativen Pfad icon.jpg im selben Verzeichnis. Wenn die Datei „icon.jpg“ im Ordner img (absoluter Pfad D:/wamp/www/img/icon.jpg) vorhanden ist, lautet der relative Pfad img/icon.jpg.

Relative Pfade können das oben genannte Problem unterschiedlicher Stammverzeichnisse vermeiden. Solange die relativen Positionen der Webseitendateien und referenzierten Dateien mit den relativen Positionen der Dateien auf dem Webserver konsistent gehalten werden, bleiben auch ihre relativen Pfade konsistent. Im obigen Beispiel wird beispielsweise in der Datei „test.htm“ auf das Bild „icon.jpg“ verwiesen. Da sich das Bild „icon.jpg“ im selben Verzeichnis wie „test.htm“ befindet, kann das Bild, sofern sich die beiden Dateien im selben Verzeichnis befinden, unabhängig davon, wo es auf den Webserver hochgeladen wird, im Browser korrekt angezeigt werden.

Hinweis: Ein relativer Pfad verwendet das Zeichen "/" als Verzeichnistrennzeichen, während ein absoluter Pfad entweder das Zeichen "\" oder "/" als Verzeichnistrennzeichen verwenden kann. Da das Verzeichnis „img“ ein Unterverzeichnis des Verzeichnisses „www“ ist, muss vor „img“ kein „/“-Zeichen hinzugefügt werden.
In relativen Pfaden wird häufig „../“ verwendet, um das übergeordnete Verzeichnis darzustellen. Wenn mehrere übergeordnete Verzeichnisse vorhanden sind, können Sie mehrere „../“ verwenden. Angenommen, das Verzeichnis, in dem sich die Datei „test.htm“ befindet, ist „D:/wamp/www/test.htm“, und das Verzeichnis, in dem sich das Bild „icon.jpg“ befindet, ist „D:/wamp/www“. Dann befindet sich das Bild „icon.jpg“ im übergeordneten Verzeichnis des Verzeichnisses, in dem sich die Datei „test.htm“ befindet. Die Anweisung zum Verweisen auf das Bild sollte wie folgt lauten:
<img src="../icon.jpg" />
Angenommen, das Verzeichnis, in dem sich die Datei „test.htm“ befindet, ist „D:/wamp/www/test.htm“, und das Verzeichnis, in dem sich das Bild „icon.jpg“ befindet, ist „D:/wamp/www“. Dann befindet sich das Bild „icon.jpg“ im Unterverzeichnis „img“ im übergeordneten Verzeichnis des Verzeichnisses, in dem sich die Datei „test.htm“ befindet. Die Anweisung zum Verweisen auf das Bild sollte wie folgt lauten:
<img src="../img/icon.jpg" />

3. Virtueller Pfad

Nachdem Sie Dateien auf einen Remote-Server hochgeladen haben, befinden sie sich in einem Ordner im lokalen Verzeichnisbaum des Servers. Auf einem Server mit Microsoft IIS könnte der Pfad zur Homepage beispielsweise folgendermaßen aussehen: c:\Inetpub\wwwroot\accounts\users\jsmith\index2.htm. Dieser Pfad wird oft als physischer Pfad der Datei bezeichnet. Die zum Öffnen der Datei verwendete URL verwendet jedoch nicht den physischen Pfad. Dabei wird der Servername oder Domänenname gefolgt von einem virtuellen Pfad verwendet (hier ein Wort zum virtuellen Verzeichnis: virtuelles Verzeichnis bezieht sich auf HTTP-Zugriff, die Verzeichnisstruktur, die angezeigt wird, wenn Benutzer Websites oder FPT durchsuchen. Wenn Sie beispielsweise E:\Website als Zugriffsverzeichnis festlegen, dann ist E:\Website das Stammverzeichnis des virtuellen Verzeichnisses; E:\Website\Image wird zu \Image.). Wenn wir also mit dem obigen Beispiel fortfahren, kann der virtuelle Pfad wie folgt geschrieben werden:
<img src="/img/icon.jpg" />

Räumen Sie auf

„./“ steht für das aktuelle Verzeichnis <img src="./img/icon.jpg" /> ist gleichbedeutend mit <img src="img/icon.jpg" />
"../" steht für das vorherige Verzeichnis
„/“ ist das aktuelle Stammverzeichnis, das ein relatives Verzeichnis ist; <img src="/img/icon.jpg" />
„~/“ Stammverzeichnis der Webanwendung. ASP.NET aktiviert den Stammoperator (~) für Webanwendungen, den Sie beim Angeben von Pfaden in Serversteuerelementen verwenden können. ASP.NET löst den Operator ~ in das Stammverzeichnis der aktuellen Anwendung auf. Sie können den Operator ~ mit einem Ordner verwenden, um einen Pfad basierend auf dem aktuellen Stammverzeichnis anzugeben. <asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" /> In diesem Beispiel wird die Bilddatei direkt aus dem Ordner „Images“ im Stammverzeichnis der Webanwendung gelesen, unabhängig davon, wo sich die Seite auf der Site befindet.