Usage of relative paths and absolute paths on webpages

I often hear netizens complain that many images on my webpage cannot be displayed normally. Why cannot I? To sum up, most of the reasons are caused by incorrect paths. Images, animations, and other materials on the webpage are stored in their own fixed locations. The webpage only calls them using HTML language through the path, and then displays them in the webpage. The paths on a webpage can be divided into relative paths and absolute paths. People (especially those who are new to web design) often do not have enough knowledge of them, the absolute path should be used in the place where the relative path is used, so that the browser cannot open the specified file at the specified location, so that the material cannot be properly displayed.

What is relative path? What is an absolute path? Why cannot I display an absolute path sometimes? Let's get to know them.

For example, if a tp.jpg image is stored in My pictures on disk c, the path is c: My pictures p.jpg. In fact, the path that completely describes the file location is an absolute path. For example, if the webpage index.htmcontains an image tp.jpg, their absolute path is:

C: My picturesindex.htm

C: My pictures p.jpg

If you use the absolute path c: My pictures p.jpg for image link, everything will be normal on the local computer, because the image tp.jpg exists under c: My pictures. But after you upload them to the website server, it will not be normal, because the storage space allocated to you by the server may be in another directory on drive C or another directory on drive D, c: My pictures. how should I set the image path? The relative path must be used here. The so-called relative path, as its name implies, is its own relative location to the target. In the previous example, you can use My pictures p.jpg to locate the tp.jpg file connected to index.htm. no matter where these files are stored, as long as their relative relationships remain unchanged, no errors will occur. The specific link method is as follows: "... My picturesimg.jpg ", where"…… "is used To indicate the upper-level directory, "..." Indicates the upper-level directory, and so on.

Let's take a look at several path errors that a beginner may make:

Example 1

C: mywedwedindex.htm

C: mywedimg p.jpg

In this example, the index.htmwebpage contains the tp.jpg Image. Because the two files are in the same Mywed directory, the beginner may write the image link as img p.jpg, so the actual link is changed to C: mywedwedimg p.jpg, obviously this is incorrect. The correct path should be relative ...... Img p.jpg.

Example 2

C: mywedwedwed1index.htm

C: mywedimgimg1 p.jpg

In this example, the index.htmwebpage contains the tp.jpg Image. Beginners may mistakenly write the image link ...... Imgimg1 p.jpg, then the absolute path is C: mywedwedimgimg1.

The tp.jpg file is invalid because it is not found in the directory. Which of the following statements is true ...... Imgimg1 p.jpg.

Example 3

C: mywedwedwedindex.htm

C: mywedwedimg p.jpg

In this example, the index.htmwebpage contains the tp.jpg Image. Beginners may mistakenly write the image link ...... Img p.jpg, then the absolute path is C: mywedimg p.jpg, because this file does not exist in this directory, it is clear that this link is incorrect. Which of the following statements is true ...... Img p.jpg.

Through the above three examples, we can see that the same part of the webpage and the image directory can use "…" .

Some readers may wonder how I can ensure that a website has many links. If I adjust the storage path of images or webpages, isn't it all messy? In order to improve work efficiency, we recommend that you use Dreamweaver for website editing because it has a site management function. Using this function, absolute paths can be automatically converted to relative paths, when you change the file path on the site, the connection paths associated with these files are automatically changed, which is very convenient!

<