为什么index.html图片路径正确却不显示？

浏览器不显示图片主因是路径基准点错：本地双击时“/”指向系统根目录，应改用相对路径如“../images/logo.png”，并右键检查src链接验证真实可访问性。

图片路径看着没错，但浏览器就是不显示——八成不是路径写错了，而是“路径算错了基准点”。

检查 src 是从哪开始解析的

浏览器读 src 时，根本不关心你编辑器里当前打开的是哪个文件夹，只认 index.html 自己在磁盘上的实际位置。比如：

• index.html 在 /pages/index.html，想引用 /images/logo.png，却写了 src="images/logo.png" → 这其实是找 /pages/images/logo.png，必然 404
• 写了 src="/images/logo.png" → 浏览器会从网站根目录（或系统根目录）开始找，本地双击用 file:// 协议时，等价于去 C:/images/logo.png（Windows）或 /images/logo.png（macOS/Linux），几乎肯定失败
• 正确做法：如果 images/ 和 pages/ 同级，就该写 src="../images/logo.png"

右键“检查”后点开 src 链接，直接验证是否真能访问

这是最快定位问题的方式，不用猜：

• 在 Elements 面板中找到 <img> 标签，鼠标悬停或右键复制 src 的值，在新标签页打开
• 如果跳转后是 404 Not Found → 路径错，按上一条重新推算
• 如果是 net::ERR_FILE_NOT_FOUND → 说明你在本地双击 HTML，却用了以 / 开头的路径
• 如果返回空白但状态码是 200，Preview 标签页里没图像数据 → 可能是图片本身损坏、CMYK 色彩模式、或扩展名和实际格式不符（比如 .jpg 后缀但其实是 WebP）

别忽略 file:// 协议下的路径限制

本地双击打开 HTML 文件时，浏览器走的是 file:// 协议，它对路径极其敏感：

立即学习“前端免费学习笔记（深入）”；

• 支持相对路径：src="images/a.png"、src="./images/a.png"、src="../assets/b.jpg"
• 禁用绝对路径：src="/images/a.png" 会被解释为系统根目录，Windows 下去 C:/images/a.png，Linux/macOS 去 /images/a.png，基本找不到
• 绝对路径（带盘符）如 src="C:/project/images/a.png" 理论可行，但多数现代浏览器出于安全策略会直接拦截，且无法跨平台迁移
• 开发阶段建议用轻量本地服务器（如 VS Code Live Server、npx serve），它把项目根当作 /，src="/images/a.png" 就能正常工作

其他容易被跳过的硬性条件

路径对了，图片还是白屏？往下查这几项：

• 文件名大小写不一致：Linux/macOS 服务器区分大小写，Logo.PNG 和 src="logo.png" 就是两个文件
• 扩展名拼写错误：src="icon.jpeg" 但实际是 icon.jpg，或反过来；WebP 图片没加 .webp 后缀
• 图片被 CSS 隐藏：img { display: none; } 或父容器 width: 0; height: 0;，临时加 style="border: 1px solid red;" 看是否渲染出框
• HTTPS 页面加载 HTTP 图片：控制台报 Mixed Content 错误，必须统一协议，或把图片换到 HTTPS 托管服务

真正卡住人的，往往不是“怎么写路径”，而是“从哪开始算起”这个隐含前提没对齐。尤其在本地双击和服务器环境之间切换时，/ 的含义彻底变了，这点最容易被忽略。