Webpage and image path problems during Website creation

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 picturestp.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 picturestp.jpg

If you use the absolute path c: My picturestp.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 picturestp.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 is like this: ".. My picturesimg.jpg", where "..." is used to represent 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: mywedimgtp.jpg

Then the actual link is changed to C: mywedwedimgtp.jpg, which is obviously incorrect. The relative region is ..imgtp.jpg.

Example 2

C: mywedwedwed1index.htm

C: mywedimgimg1tp.jpg

Then, the absolute path is C: mywedwedimgimg1tp.jpg. Because this file is not found in this directory, this link is obviously incorrect. The destination must be ...imgimg1tp.jpg.

Example 3

C: mywedwedwedindex.htm

C: mywedwedimgtp.jpg

Then, the absolute path is C: mywedimgtp.jpg, because this file is not in the directory, it is clear that this link is incorrect. The destination must be ..imgtp.jpg.

In the above three examples, we can see that the same part of the webpage and the image directory can be replaced.

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!