如何获取图片或视频的相对文件路径？VS Code路径简化求助

第一步：确认项目结构 #

先把你的项目文件层级理清楚，确保HTML文件和images文件夹处在同一项目根目录下，结构参考：

Cleant Dental services/
├─ index.html （你的HTML文件）
└─ images/
   ├─ up-chevron.png
   └─ down-chevron.png

第二步：调整VS Code设置 #

打开VS Code设置（快捷键Ctrl+, Windows/Linux，Cmd+, Mac），搜索并开启以下选项：

• 搜files.useRelativePaths，勾选该设置，让VS Code引用文件时优先用相对路径。

要是你用「Paste Image」插件插入图片，还得额外配置插件：

• 打开插件设置，把Paste Image: Path设为./images
• 开启Paste Image: Relative Path，这样粘贴图片时会自动生成./images/xxx.png的相对路径。

第三步：替换现有代码的路径 #

把你代码里的绝对路径改成相对路径，示例修改如下：
原代码：

<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/up-chevron.png" id="upArrow" onclick="upArrow()">
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/down-chevron.png" id="downArrow" onclick="downArrow(">

修改后：

<img src="./images/up-chevron.png" id="upArrow" onclick="upArrow()">
<img src="./images/down-chevron.png" id="downArrow" onclick="downArrow()">

（注：原代码里downArrow(缺少闭合括号和引号，已帮你修正）

如果HTML文件在项目根目录，./可以直接省略，写成images/up-chevron.png就行。

内容的提问来源于stack exchange，提问作者Tashel