VSCode中如何跨子文件夹正确引用其他子文件夹内元素的相对路径

你的项目根目录下是两个平级的独立文件夹：

• image：专门存放图片资源
• Source-Code：专门存放HTML页面文件
  具体结构如下：

项目根目录
├─ image/
│  └─ 目标图片（例：banner.jpg）
└─ Source-Code/
   └─ 要写的HTML文件（例：index.html）

相对路径规则里，../代表当前文件所在目录的上一级（也就是父目录）。你的HTML文件在Source-Code文件夹里，要访问平级的image文件夹，得先用../跳出Source-Code回到项目根目录，再进入image文件夹找对应图片。
比如要引入image文件夹里的banner.jpg，img标签直接写：

<img src="../image/banner.jpg" alt="首页横幅">

直接复制路径不生效，核心问题是漏了向上跳转的../：

• 直接写image/xxx.png的话，浏览器会默认去Source-Code/image/路径下找图片，这个路径根本不存在，自然加载失败
• 别写以/开头的根路径，这本质是绝对路径的一种，本地双击打开HTML、换服务器部署的时候都会失效，满足不了跨环境迁移的要求

写完路径后本地双击打开HTML文件，如果图片能正常显示就说明写法正确。后续只要保持image和Source-Code的平级目录结构不变，不管把整个项目迁移到什么环境，这个路径都不用改，能正常加载。

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