1. 为什么HTML图片不显示的常见原因
在网页开发中，图片不显示常见原因往往源自路径解析和资源部署的问题。核心原因包括相对路径错误、目录层级错乱、以及大小写敏感的文件名。
另外，浏览器解析路径的规则决定了 src、href 指向的实际文件位置。错误的基准路径、未上传的文件、以及服务器对资源的访问权限也会导致图片显示为空或占位符。
<img src="images/photo.jpg" alt="示例图片">当你看到网络面板的 404 结果时，要关注请求的实际 URL，以及该 URL 是否在项目结构中存在对应的图片文件。
1.1 相对路径引用错误
在同一个站点内，相对路径的计算是基于包含图片的 HTML 文件的位置。如果 HTML 文件位于不同深度的目录，简单的 images/photo.jpg 可能指向错误位置。
另外，对父级目录的跳转要用 ..，命名中的大小写也要一致，尤其在 Linux 服务器上大小写敏感。
<img src="../images/photo.jpg" alt="关于图片">
正确的相对路径示例通常要结合当前 HTML 的实际路径来写，例如：若 index.html 位于 /pages/ 下，图片在 /pages/images/，则应使用 src="images/photo.jpg"。
1.2 文件结构与目录定位
要排查路径，先确认
通过对照目录结构，可以在本地开发服务器上复现实验：镜像服务器的路径结构通常与本地文件系统相同，避免跨盘符或符号链接造成的错配。
# 示例文件结构
project/
├── index.html
└── images/└── photo.jpg
在这类结构中，index.html 与 images/photo.jpg 的关系决定了 src 的写法，如果 HTML 和图片位于同一目录，则 src="photo.jpg"；若图片在子目录 images 下，则 src="images/photo.jpg"。
1.3 大小写敏感和部署差异
不同的服务器对文件名的大小写敏感程度不同，Linux 服务器通常区分大小写，而 Windows 在默认情况下不区分。这个差异常导致本地调试通过、服务器上线后图片不显示。
此外，开发环境与生产环境的部署流程差异也会引入路径问题，例如构建工具将图片放到其他目录，或静态资源被重定位到 CDN。
2. 从相对路径到文件结构的排错方法
2.1 逐步核对目录结构与引用路径
第一步是对照真实的项目目录，确认 HTML 文件与图片之间的相对关系。你应该知道：哪一个 HTML 文件引用哪一个图片，以及图片实际存放在哪个目录。
其次，在本地查看同目录下的图片是否能直接打开，以排除图片文件损坏或权限问题。
# 在项目根目录执行
tree -L 2
例如得到的结构如：index.html 与 images/photo.jpg 的相对位置，就能帮助你确定 src 的写法。
2.2 使用浏览器开发者工具进行路径追踪
浏览器的开发者工具是排错的最强工具之一。你可以在 Network（网络）面板中筛选 Img 请求，查看返回状态码和实际请求 URL。
如果看到 404 未找到，就要对比页面 HTML 的 src 值与服务器上的实际路径是否一致；还要检查是否存在
<head><base href="https://example.com/assets/" >
</head>
<img src="images/photo.jpg" alt="示例图片">
在这种情况下，实际加载的路径会变成 https://example.com/assets/images/photo.jpg，如果该文件不存在，就会返回 404。
2.3 尝试绝对路径与正确的相对路径对照验证
为排除路径解析问题，你可以先用绝对路径尝试加载图片，例如 src="/images/photo.jpg" 或完整的 URL src="https://yourdomain.com/images/photo.jpg"。
如果使用绝对路径能加载，则说明相对路径的组合存在错位；如果绝对路径也不行，则很可能是图片未部署、权限受限或服务器没有正确提供静态资源。
<img src="/images/photo.jpg" alt="示例图片">
# 使用 curl 验证图片是否能从服务器获取
curl -I https://yourdomain.com/images/photo.jpg
在上述场景下，最好让图片部署在与网页同一域的静态资源目录下，并且保持一致的路径风格，避免混用多种路径写法。
通过以上步骤，你可以在浏览器的调试信息和实际文件结构之间建立一致性，从而快速定位“为什么HTML图片不显示”的原因。
