持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

前几天的文章整理了如何给一个html文件里添加图片，关于图片位置的设置提到了相对路径和绝对路径，本文对这两个路径的写法再做补充。上次的文章：含有图片的html页面（页面效果+实现步骤） - 掘金 (juejin.cn)

图片标签

首先对之前的图片标签做一个回顾，图片标签的写法是 <img src='' alt="">

src 属性的属性值是必须要写的，属性值内容就是要添加的图片的路径；
alt 属性的属性值是当图片不能加载出来(网络问题或者路径有差错)的时候显示的提示信息，这个属性值是可以不写的。为了确保图片不能正常加载的时候内容还能够被理解，建议设置好该属性。

两种路径

之前提到过的两种路径：绝对路径和相对路径。

绝对路径

绝对路径就是从起点开始，到要获取的文件的路径。如下图：

要获取01.png文件时：
绿色部分选中的部分就是当前所在位置的路径，要获取的 01.png 即在当前文件夹下，鼠标选中的 01.png 的绝对路径。
即 01.png 的绝对路径如下

graph TD
此电脑 --> D盘 --> 20221029 --> 01 --> 01.png

相对路径

相对路径就是从当前位置开始，到要获取的文件的路径。
要获取01.png文件时：
依旧是上图的绿色部分，绿色部分为当前位置，所以01.png 的相对路径如下：

graph TD
当前位置 --> 01.png

在html中展示图片的方法

文件关系

• 20221029(大文件夹)
  • 01（小文件夹1）
    • 01.html(文件1）
    • 01.png(文件2）
  • 02（小文件夹2）
    • 02.html(文件1）
    • 02.png(文件2）

添加的照片和当前文件在同一文件夹下时

以在 01.html 中添加 01.png 为例：

• 当前位置是 01.html 文件，找到 01.png 的路径可以是
  • 方法一：直接到 01.png ；
  • 方法二：找到 01.png 所在的文件夹 20221029，也就是当前文件夹，用 ./ 表示找到当前文件夹。

代码展示：

方法一： <img src="01.png" >
方法二： <img src="./01.png" >

添加的照片和当前文件不在同一文件夹下时

以在 01.html 中添加 02.png 为例：

• 当前位置是 01.html 文件，找到 02.png 的路径可以是
  • 找到 02.png 所在 02文件夹, 然后在 02下找到 02.png文件
  • 步骤一：用 ../ 表示离开当前文件夹找到上一级文件夹 ，即到达20221029 文件夹
  • 步骤二：用文件夹/表示找到文件夹并打开，即在20221029 文件夹中找到 02文件夹并打开
  • 步骤三：此时在 02文件夹中，直接打开 02.png即可

代码展示：

<img src="../02/02.png" >