当 html 文件位于子目录时，需使用相对路径 ../ 回退到父目录，再进入 images 文件夹定位图片；这是由浏览器基于当前 html 文件位置解析路径的机制决定的。

当 html 文件位于子目录时，需使用相对路径 ../ 回退到父目录，再进入 images 文件夹定位图片；这是由浏览器基于当前 html 文件位置解析路径的机制决定的。

在 Web 开发中，路径解析始终以当前 HTML 文件所在位置为基准，而非项目根目录或 VS Code 工作区根目录。这意味着：路径不是“从哪开始找”，而是“从当前文件出发怎么走”。

例如，假设你的项目结构如下：

project/
└── Website/
    ├── images/
    │   └── logo.png
    └── pages/
        └── about.html

此时 about.html 位于 Website/pages/，而图片 logo.png 在 Website/images/。要引用该图，必须从 pages/ 目录“向上退一级”到 Website/，再“向下进入” images/：

@@##@@

✅ 正确原理说明：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• ../ 表示上一级目录（即从 pages/ 退至 Website/）；
• ../images/ 即 Website/images/；
• 浏览器据此拼接出完整资源路径并发起请求。

❌ 常见错误及原因：

• src="images/logo.png" → 浏览器会在 Website/pages/images/ 中查找，路径不存在；
• src="./images/logo.png" → ./ 是当前目录（pages/），等价于上一条，仍错误；
• src="Website/images/logo.png" → 浏览器会尝试在 Website/pages/Website/images/ 中查找，属冗余嵌套，路径错误。

? 实用技巧：

• 使用 VS Code 的 Path Intellisense 插件可实时提示相对路径；
• 在浏览器开发者工具（F12 → Network 标签页）中查看图片 404 请求的“Failed Request URL”，能直观验证路径是否拼写正确；
• 推荐统一采用相对路径（而非绝对路径 /images/...），以保障项目可移植性（尤其本地开发或静态部署场景）。

总结：路径的本质是“导航指令”，不是“地址描述”。只要牢记“起点是 HTML 文件自身位置”，熟练运用 ./（当前）、../（上级）、../../（上两级）即可精准定位任何同级或跨级资源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！