一、相对路径:
- 同一级路径:
图像文件和HTML文件位于同一文件夹,只需输入图像文件的名称即可,如<img src="logo.gif" />
- 下一级路径:
图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名,之间用“/”隔开,
如<img stc="img/img01/logo.gif">
- 上一级路径:
图像文件位于HTML文件夹的上一级文件夹,在文件名之前加入“…/”,如果是上两级,则需要使用"…/…/",以此类推,如<img src="../logo.gif">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
同一级路径: <br />
<img src="是双笙啊.jpg" alt="" width="200"><br />
下一级路径:<br />
<img src="images/双笙1.jpg " alt="" width="200"><br />
上一级路径:<br />
<img src="../双笙2.jpg" alt="" width="200">
</body>
</html>
相对路径效果展示:
二、绝对路径
(1)在图片属性上查找到存储位置(较少使用):
(2)使用完整的网络地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="C:\Users\mayn\Desktop\是双笙啊\双笙3.jpg" alt="" > <br />
<img src="https://imgsa.baidu.com/forum/w%3D580%3B/sign=c3be9fdf7f0e0cf3a0f74ef33a7df01f/b3119313b07eca8036d40b2a9c2397dda044832d.jpg" alt="">
</body>
</html>
绝对路径效果展示: