The difference between absolute path and relative path in web page creation

1. Absolute path

First of all, on the local computer, the absolute path of a file of course 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 on drive D. We don't need to know any other information to determine the location of the file based on the absolute path.

There are also hyperlink file locations, which are also absolute paths, such as upload/2022/web/icon.jpg.

Note: Sometimes the edited page works fine when you browse it on your own computer, but it is very likely that the pictures will not be displayed when you upload it to a web server. Because static HTML pages need to be uploaded to the website, and in the website application, we usually use "/" to represent the root directory, /img/icon.jpg means that the photo.jpg file is in the img directory on the root directory of this website. But you should know 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 Web server's D drive, it may be 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 drive of the Web server, so the picture will not be displayed when browsing the web page. This is also the risk of using absolute paths.

2. Relative Path

Relative path, as the name implies, is the relative position of the path to the target.

Suppose the page name you want to import the file is test.htm, and it exists in a folder called www (absolute path D:/wamp/www/test.htm), then reference the "icon.jpg" file that also exists in the www folder (absolute path D:/wamp/www/icon.jpg), 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 the relative path is img/icon.jpg.

Relative paths can avoid the above problem of different root directories. As long as the relative positions of the web page files and referenced files are kept 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", as long as the two files are in the same directory, the picture can be displayed correctly in the browser no matter where it is uploaded to the Web server.

Note: A relative path uses the "/" character as a directory separator, while an absolute path can use either the "\" or "/" character as a directory separator. Since the "img" directory is a subdirectory of the "www" directory, there is no need to add a "/" character before "img".
In relative paths, “../” is often used to represent the parent directory. If there are multiple parent 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 in the parent directory of the directory where the "test.htm" file is located, and the statement to reference the picture should be:
<img src="../icon.jpg" />
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 in the subdirectory "img" in the parent directory of the directory where the "test.htm" file is located, and the statement to reference the picture should be:
<img src="../img/icon.jpg" />

3. Virtual Path

After you upload files to a remote server, they reside 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 of the file. However, the URL used to open the file does not use the physical path. It uses the server name or domain name, followed by a virtual path (here is a word about virtual directory: virtual directory refers to Http access, the directory structure displayed when users browse websites or FPT. For example, if you set E:\Website as the access directory, then E:\Website is the root directory of the virtual directory; E:\Website\Image becomes \Image.). So continuing with the above example, the virtual path can be written as
<img src="/img/icon.jpg" />

Tidy it up

“./” represents the current directory <img src="./img/icon.jpg" /> is equivalent to <img src="img/icon.jpg" />
"../" represents the previous directory
“/” is the current root directory, which is a relative directory; <img src="/img/icon.jpg" />
“~/” Web application root directory. ASP.NET enables the Web application root operator (~), which you can use when specifying paths in server controls. 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. <asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" /> In this example, the image file will be read directly from the Images folder in the root directory of the Web application, regardless of where the page is located on the site.