浏览器不显示图片主因是路径基准点错：本地双击时“/”指向系统根目录，应改用相对路径如“../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 alt="为什么index.html图片路径正确但不显示？" >标签，鼠标悬停或右键复制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 托管服务
真正卡住人的，往往不是“怎么写路径”，而是“从哪开始算起”这个隐含前提没对齐。尤其在本地双击和服务器环境之间切换时，/ 的含义彻底变了，这点最容易被忽略。
