一、相对路径:
  • 同一级路径:
    图像文件和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>

绝对路径效果展示: