The first day of learning Javaweb: absolute path and relative path
When I was learning Javaweb recently, I found that the pictures inserted according to the method in the book could not be displayed.
According to the grammar in the book, HTML images are inserted through the <img> tag:
<img src="Image source file path" alt="Prompt text when the picture cannot be displayed" title="Prompt text when the mouse passes over the picture"/>
So I checked some information online and found that to solve this problem, the path problem needs to be solved first.
In the img tag, in order to correctly display the image in the browser, we must give the exact path of the image, that is, the src attribute of the <img> tag. The path here can be an absolute path or a relative path.
So, what are absolute paths and relative paths?
Absolute path The
absolute path is the full path, which is the real path of the file on the hard disk. For example, if I store a picture named abc.png on the desktop, the path of the picture is C:\Users\xanxus\Desktop\abc.png
Relative path
Relative path searches for relative files based on the path where the current file is located. In other words, the relative path is the location of different files under the same website.
The writing method of the relative path is to analyze the relationship between the position of the current webpage and the position of the image, and then express the relative relationship between them in a way.
Special symbols used in relative paths: The
following are several special symbols used in establishing paths and their meanings.
"./ ": represents the current directory.
". ./ ": represents the upper level directory.
Start with /: represents the root directory.
for example:
As shown in the figure, the
path of practice1_1.html is
.../WebContent/practice1_1.htmlJellyfish.jpg The
path is
.../WebContent/image/Jellyfish.jpg
At this time, the relative path of practice1_1.html to refer to the picture jellyfish.jpg is:
image/jellyfish.jpg
(because practice1_1.html and the image file where the jellyfish picture is located are in the same large file WebContent)
The path of light.jpg is.../WebContent/WEB-INF/lib/光.jpg
If practice1_1.html wants to reference Guang.jpg, the relative path is:
WEB-INF/lib/光.jpg (the reason is the same as above)
The relative path of jellyfish and light is:
…/WEB-INF/lib/光.jpg
(The smallest same folder for jellyfish pictures and light pictures is WebContent, therefore, the jellyfish pictures must first be traced back to WebContent ie.../, and then traced layer by layer , Namely WEB-INF/lib/光.jpg, which together is the relative path of jellyfish and light.../WEB-INF/lib/光.jpg)