In-depth understanding of absolute and relative paths to files

When we reference files or pictures, relative paths and absolute paths will be involved. If they are not clearly distinguished, it is easy to make mistakes. This article will give you the relative path and absolute path of the file. Friends in need can refer to it. I hope it will be useful to you.

When using DW to write HTML, you can directly select the path to a specific file. Now using webstorm, you can only select files in the same directory as the HTML file. Let’s sort out the difference between absolute paths and relative paths to files.

1. Absolute path

First of all, on the local computer, the absolute path of the file refers to the path where the file actually exists on the hard disk.

For example, this path: D:/wamp/www/img/icon.jpg tells us that the icon.jpg file is in the img subdirectory under the wamp directory of the D drive. We don't need to know any other information to determine the location of the file based on the absolute path.

There is also a hyperlink file location, which is also an absolute path, such as http://www.img.net/img/icon.jpg.

Note: Sometimes the edited page can be browsed normally on your own computer, but when uploaded to the Web server for browsing, the image may not be displayed. Because static HTML pages need to be uploaded to the website, and in website applications, we usually use "/" to represent the root directory, and /img/icon.jpg means that the photo.jpg file is in the img directory on the root directory of the website. . But be aware that the root directory referred to here is not the root directory of your website, but the root directory of the web server where your website is located. Because when uploading to the Web server, the entire website may not be placed on the D drive of the Web server, but may be on the F drive or H drive. Even if it is placed in the D drive of the Web server, the directory "D:/wamp/www/img" may not exist in the E disk of the Web server, so the picture will not be displayed when browsing the web. This is also a risk of applying absolute paths.

2. Relative path

Relative path, as the name suggests, is relative to the target location.

SupposeThe page name of the file you want to import is test.htm, and it exists in a folder called www (absolute path D:/wamp/www/test.htm), then quote At the same time, the "icon.jpg" file exists in the www folder (absolute path D:/wamp/www/icon.jpg), and the relative path icon.jpg in the same directory; if the file "icon.jpg" exists in the img folder (Absolute path D:/wamp/www/img/icon.jpg), then relative path img/icon.jpg.

Relative paths can avoid the above problems of different root directories. As long as the relative positions of the web page files and reference files are saved consistent with the relative positions of the files on the web server, their relative paths will also be consistent. For example, in the above example, the "icon.jpg" picture is referenced in the "test.htm" file. Since the "icon.jpg" picture is in the same directory as "test.htm", then as long as these two The file is still in the same directory, so no matter where it is uploaded to the web server, the image will be displayed correctly in the browser.

Note: Relative paths use the "/" character as the directory separator character, while absolute paths can use "\" or "/" characters as the directory separator character. Since the "img" directory is a subdirectory under the "www" directory, there is no need to add the "/" character before "img".

In relative paths, "../" is often used to represent the upper-level directory. If there are multiple upper-level directories, you can use multiple "../". Assume that the directory where the "test.htm" file is located is "D:/wamp/www/test.htm", and the directory where the "icon.jpg" picture is located is "D:/wamp/www", then the "icon.jpg" picture is relatively For the "test.htm" file, which is in the upper-level directory of the directory where it is located, the statement quoting the picture should be:

Assume that the directory where the "test.htm" file is located is "D:/wamp/www/test.htm", and the directory where the "icon.jpg" picture is located is "D:/wamp/www", then " Compared with the "test.htm" file, the "icon.jpg" picture is in the subdirectory of the upper-level directory of the directory where it is located - "img". The statement quoting the picture should be:

< ;img src="../img/icon.jpg" />

3. Virtual path

After uploading files to the remote server, these files reside Leave it in a folder in the server's local directory tree. For example, on a server running Microsoft IIS, the path to the home page might look like this: c:\Inetpub\wwwroot\accounts\users\jsmith\index2.htm This path is often referred to as the physical path to the file. However, the URL used to open the file does not use a physical path. It uses the server name or domain name, followed by the virtual path (here is a virtual directory: the virtual directory is for HTTP access, the directory structure displayed when the user browses the website or FPT. For example, you set E:\Website as Access the directory, then E:\Website is the root directory of the virtual directory; E:\Website\Image becomes \Image. ). So following the above example, the virtual path can be written as

Let’s sort it out

"./" represents the current directory is equivalent to

"../" represents the upper-level directory

"/" The current root directory is a relative directory;

" ~/” Web application root directory. ASP.NET enables the Web application root operator (~), which can be used when specifying a path in a server control. ASP.NET resolves the ~ operator to the root directory of the current application. You can use the ~ operator with a folder to specify a path based on the current root directory. In this example, the image file will be directly from the Images folder in the root directory of the web application Read, no matter where the page is located on the website.

The above is the detailed content of In-depth understanding of absolute and relative paths to files. For more information, please follow other related articles on the PHP Chinese website!