relative path
Relative path : The directory path established based on the location of the referenced file.
In simple terms, the position of the image relative to the HTML page
| Relative path classification | symbol | illustrate |
| same level path | The image file is located at the same level as the HTML file like <img src="baidu.gif" /> | |
| next level path | / | The image file is located one level below the HTML file such as <img src="images/baidu.gif" /> |
| upper level path | ../ | The image file is located one level above the HTML file such as <img src="../baidu.gif" /> |
The relative path starts from the file where the code is located to find the target file, and the previous level, the next level and the same level we are talking about here are the position of the image relative to the HTML page
Three cases of relative paths:
1. The image is located at the same level as the HTML file:
<img src="图片名称"/>2. The image is located in the next-level path of HTML:
<img src="下一级路径名/图片名" />3. The image is located in the upper-level path of HTML:
<img src="../图片名">
若图片在上上级目录，则：
<img src="../../图片名">
每一个 ../ 代表一个上一级，有多少个上一级，就写多少个 ../The absolute path of the path:
Absolute path: It refers to the absolute position in the directory, directly reaching the target position, usually the path starting from the drive letter.
For example: "C:\Users\Tiga\Desktop\learning file storage\HTML\image storage\Paidaxing.jpg"
<img src="C:\Users\迪迦\Desktop\学习文件存放处\HTML\图片存放\派大星.jpg" />Indication: Note the backslashes, the backslashes of relative paths are / left slanted, and the backslashes of absolute paths are \ right slanted.
Note: Absolute paths are not recommended , you must learn to use relative paths. The absolute path is too personal, because the absolute path starts from the drive letter, that is, the C drive and D drive. Just like my example above, not everyone has the Diga folder in their computer, and not all Everyone has the folder where the study files are stored .
Therefore, if you use an absolute path, when your html file is used by others, or when you use another computer, the picture will not be displayed, because the computer cannot find the picture in this path. Therefore, it is recommended that you learn to get used to using relative paths.
Absolute paths are rarely used in future work, because absolute paths can only be used on their own computers, and errors will occur when customers use them.
There is an absolute path we will use:
It is the absolute path of the picture, that is, the picture is on the network.
The way to obtain it is to right-click the picture on the network and select Copy the picture address to get the absolute path of the picture on the network. This absolute path is unique on the network.
Example: https://pic57.photophoto.cn/20201213/0005018348871506_b.jpg
<img src="https://pic57.photophoto.cn/20201213/0005018348871506_b.jpg" />Note: The disadvantage of taking the picture in this way is that if the website deletes the picture, the absolute path we use will not be able to get the picture.