在开发静态网页时，我们常把图片和HTML文件一起放在项目目录里。要让页面正常显示这些图片，核心在于理解浏览器是如何根据HTML文档的位置去查找资源的。本地打开页面一般使用file协议，此时路径解析规则和部署到服务器后略有不同，但只要掌握相对路径的写法，就能在大多数场景下稳定运行。
一、为什么本地引用图片容易出问题
很多初学者在本地双击打开HTML文件后，发现页面上的图片位置是一片空白或者显示破碎图标。这通常不是图片本身损坏，而是地址写错导致浏览器找不到文件。在file协议下，浏览器严格依据当前HTML文件的绝对位置拼接资源地址，如果代码里写了类似C:projectimga.jpg这样的绝对路径，换一台电脑或移动了文件夹就会失效。
另一个常见误区是使用反斜杠。Windows资源管理器里路径用反斜杠，但HTML属性值和URL标准都要求正斜杠。写成<img src="imga.jpg">在部分浏览器可能被错误解析。此外，本地文件协议出于安全考虑，禁止某些跨目录或特殊请求，这也让不正确的引用直接被拦截。
二、相对路径的基本写法
相对路径是指以当前HTML文件所在目录为起点来描述目标文件位置。假设项目结构如下：项目根目录中有index.html，还有一个images文件夹，里面放著logo.png。那么在index.html中引用图片，就应该写images/logo.png，这表示从当前目录进入images文件夹再取logo.png。
如果图片和HTML在同一目录，直接写文件名即可，例如<img src="logo.png">。若HTML在子目录如pages/index.html，而图片仍在根目录的images里，则需要先返回上级目录，写成../images/logo.png。其中的两个点加斜杠代表上一级目录。这种写法不依赖盘符，整个文件夹拷贝到任何地方都能用。
<!-- 项目结构 --> <!-- project/ --> <!-- index.html --> <!-- images/logo.png --> <!-- pages/home.html --> <!-- index.html 中引用 --> <img src="images/logo.png" alt="网站标志"> <!-- pages/home.html 中引用根目录图片 --> <img src="../images/logo.png" alt="网站标志">
三、文件名大小写与后缀细节
在Windows上文件名不区分大小写，但不少浏览器内核或后续部署到Linux服务器时会区分。本地开发时若写成Image/Logo.PNG，而实际文件是images/logo.png，在Windows资源管理器里能打开，但规范的做法是保持代码和实际文件完全一致，避免迁移到服务器后图片丢失。
另外，URL中不能包含空格。如果图片名带有空格，应该用百分号编码，例如my%20photo.jpg。更简单的办法是开发期就统一用英文字母、数字、下划线命名，既清晰又不会触发解析异常。这样在本地引用和日后上线都省去很多麻烦。
四、使用base标签统一基准路径
当页面较多且目录层级复杂时，可以在HTML的head里使用<base>标签指定一个基准URL。之后所有相对路径都会基于这个基准来解析，而不再是HTML文件自身位置。比如设置<base href="images/">，那么页面里写<img src="logo.png">实际会去images/logo.png找图。
不过base标签会影响页面上所有链接和脚本引用，若只用它处理图片反而容易让其他资源错乱。因此更推荐保持目录结构清晰，在每处引用时写清楚相对位置。只有在大型本地文档系统中，才考虑用base统一托管资源目录。
<head> <base href="images/"> </head> <body> <img src="logo.png" alt="基于base的图片"> </body>
五、本地服务器与直接打开的区别
直接双击HTML文件是以file协议运行，某些现代浏览器会限制file协议下的fetch或模块加载，但普通img标签引用本地图片一般不受影响。若你用了JavaScript动态加载图片或者背景图通过CSS引用，路径规则同样适用相对写法，只是CSS文件自身的位置会成为基准而非HTML。
当需要模拟真实环境时，可用简易服务器如Python的http.server在本地启动，此时协议变为http，路径解析和线上一致。这样能提前发现大小写或目录错误。无论哪种方式，只要遵循相对路径规范，本地HTML引用项目文件夹中的图片都会变得简单可靠。
| 场景 | 引用写法 | 说明 |
|---|---|---|
| 同目录 | logo.png | 直接写文件名 |
| 下级目录 | images/logo.png | 目录名加斜杠 |
| 上级目录 | ../images/logo.png | 两个点返回上层 |