浏览器加载 index.html 时，图片路径是相对于 HTML 文件所在位置解析的相对路径；应优先使用 ./ 开头的显式相对路径，避免双击打开导致 file:// 协议下路径解析异常，需用本地服务器（如 Python http.server）预览以确保符合标准 Web 规则。
图片路径是相对路径还是绝对路径
浏览器加载 index.html 时，图片路径是相对于当前 HTML 文件所在位置解析的，不是相对于你双击打开的路径，也不是相对于服务器根目录（除非用 / 开头）。常见错误是把图片放在和 index.html 同级，却写成 
./logo.png。
检查方式：右键图片 → “检查元素” → 看控制台是否报 404，点开链接看浏览器实际请求的 URL 是什么。如果地址明显偏了（比如多了一层 pages/ 或少了一层 assets/），就是路径算错了。
实操建议：
- 优先用以
./开头的显式相对路径，例如
- 确认文件系统中路径大小写完全一致（macOS/Linux 区分大小写，
Logo.png≠logo.png） - 不要依赖“双击打开 index.html”来测试路径——这种场景下浏览器用的是
file://协议，某些路径行为（如/images/）会失效；改用本地服务器预览
用本地服务器启动而非双击打开
双击运行 index.html 时，浏览器地址栏显示 file:///xxx/index.html，此时以 / 开头的路径（如 /images/icon.jpg）会被解析为磁盘根目录，而不是项目根目录，必然 404。
解决办法是起一个最小 HTTP 服务，让路径按标准 Web 规则解析。不需要装复杂工具：
- Python 3：终端进入项目根目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js：全局安装
serve（npm install -g serve），然后运行serve -s . - VS Code：安装插件 “Live Server”，右键
index.html→ “Open with Live Server”
这样所有相对路径、/xxx 绝对路径都会按站点根目录（即你执行命令的目录）正确解析。
图片路径中常见的拼写与结构陷阱
很多“图片不显示”问题其实卡在非常基础但容易忽略的细节上，尤其当项目结构嵌套后：
-
src值里混用了反斜杠\（Windows 资源管理器默认显示），HTML 只认正斜杠/，src="images\icon.png"会失败 - 路径里有空格或中文（如
my pic.jpg），未编码会导致加载中断；应重命名为my-pic.jpg或确保 URL 编码（不推荐依赖编码） - 误把图片放在
node_modules或.git目录下——这些路径通常不在 Web 服务可访问范围内 - 使用了
验证方法：复制 src 的值，粘贴到浏览器地址栏（补全协议和域名，如 http://localhost:8000/images/logo.png），看能否直接下载图片。
检查图片文件是否真被加载（而非仅路径错）
即使路径对了，也可能因 MIME 类型、跨域或文件损坏导致空白。打开开发者工具 → Network 标签页，刷新页面，筛选 Img，点击对应图片请求：
- 状态码不是
200？查服务器配置或文件权限（如 Linux 下chmod 644 logo.png） - 响应头没有
Content-Type: image/png（或对应类型）？某些静态服务器不会自动推断，需配置 MIME 映射 - 预览（Preview）标签页是空或显示乱码？说明文件本身损坏或被文本编辑器误保存（比如用 VS Code 保存二进制图片为 UTF-8）
- 请求被标记为
blocked: other或出现CORS错误？说明图片来自不同源且对方未允许跨域，换成本地路径或加crossorigin="anonymous"（仅限支持 CORS 的服务）
最稳妥的做法：换一张已知能用的小图（比如从 https://via.placeholder.com/100 下载一个）放进相同路径，测试是否是原图的问题。
路径问题看着简单，但涉及文件系统、协议规则、开发工具行为三层耦合，最容易在“我以为它该这么工作”的地方出错。别信直觉，用 Network 面板看真实请求，用 file:// 和 http:// 两种方式交叉验证，比反复改路径更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
