本文聚焦前端开发者必看：为什么HTML中的图片不显示？从理解相对路径到快速修复的实操指南，帮助你从根本原因到快速修复完成一套可复制的流程。
01. 为什么图片不显示的常见原因
01.01 路径错误是最常见的原因
图片路径是否正确直接决定浏览器能否请求到资源。若图片位于不同目录、你修改了项目结构，原有相对路径将失效。另一个重要点是路径的相对性是相对于当前文档的位置，而非你想象的根目录。再者，在 Linux 服务器上大小写敏感，photos.JPG 与 photos.jpg 被视为不同文件名，极易造成加载失败。
如果你看到网络请求返回 404 时，优先检查路径是否指向实际的图片文件位置，同时确认文件名大小写和扩展名是否一致。
<!-- 可能的错误示例：图片实际路径为 /assets/images/logo.png，但引用路径为 /assets/images/Logo.png -->
<img src="assets/images/Logo.png" alt="Logo">
修正要点：确保 src 的相对路径或根路径指向真实存在的图片文件，并且考虑服务器端的大小写敏感性。
01.02 资源未上传或放错目录
有时图片其实并未上传到预期的目录，或被放在了错误的文件夹中。此时浏览器会发起请求但返回 404，页面中的 图片占位符就会显示为空白。
检查点包括：目标路径是否包含图片、图片是否被提交到版本控制与部署流程、以及构建工具是否在打包阶段将图片复制到目标目录。
<!-- 如果图片被放在 assets/pics/，但你引用了 images/ 目录，会导致失败 -->
<img src="images/banner.jpg" alt="Banner">
<img src="assets/pics/banner.jpg" alt="Banner">
排查要点：查看网络面板中的请求路径、确认资源实际存在于服务器上的位置，以及部署流程是否把静态资源正确地写入目标目录。
01.03 文件扩展名或编码问题
扩展名写错（如 .jpeg 与 .jpg）、大小写不一致、以及特殊字符（空格、中文等）都可能导致图片无法加载。浏览器在解析 URL 时会对扩展名和编码进行严格匹配，因此准确的扩展名与统一的命名规范很重要。
示例：一个图片实际是 photo.JPEG，但你在代码中写成 photo.jpeg，或文件名包含非 ASCII 字符而未进行 URL 编码，都会引发加载失败。
<img src="images/photo.JPEG" alt="Photo">
02. 理解相对路径与绝对路径在 HTML 的应用
02.01 相对路径的工作原理
相对路径是基于当前文档的位置来解析的，不是固定的根目录。你的 HTML 文件从哪儿加载，决定图片 src 的起点。若你把 HTML 文件从根目录移动到子目录，需同步更新 引用的相对路径。
在实际开发中，使用简单清晰的文件结构有助于避免路径错位，并且可以在多环境部署时保持一致性。
02.02 绝对路径与根相对路径的区别
绝对路径通常以根目录为起点，例如 /assets/images/photo.jpg，它与服务器根目录对齐；而根相对路径以 "/" 开头，受应用部署结构影响更大，可能在不同域名或子域名下表现不同。相对路径 在本地开发更灵活，但在跨域部署时需谨慎。
为了确保跨环境可用，可以在部署阶段统一设置基础路径，或使用构建工具将路径在打包时改写为正确的根路径。
<!-- 相对路径示例（相对当前 HTML 的位置） -->
<img src="images/photo.jpg" alt="Photo"><!-- 根相对路径示例（以域名根为起点） -->
<img src="/assets/images/photo.jpg" alt="Photo">
03. 快速修复的实操指南
03.01 使用开发者工具定位资源
遇到图片不显示时，第一时间打开浏览器开发者工具的 Network（网络）面板，刷新页面，查看资源请求是否返回 404、403 或其他错误代码。通过 Inspect Element 或 元素查看器，定位到具体的 <img> 标签及其 src 属性，确定问题点。
在定位后，务必确认服务器端的实际资源路径与网页中引用的路径是否一致，并记录下正确的路径格式以便后续修复。
<!-- 通过检查网络请求和元素，可以快速确认路径问题 -->
<img src="assets/images/logo.png" alt="Logo">
03.02 调整引用路径并测试
在确定正确路径后，更新 HTML 中的 src 属性，并进行多设备、多浏览器测试，确保在不同环境中都能正确加载。若项目采用组件化或模板化渲染，尽量通过变量或构建脚本统一管理资源路径，以减少人工错误。
示例要点：保持目录结构清晰，尽量使用简短的一致命名，避免空格与特殊字符；如有多环境部署，可在构建阶段为资源生成正确的公开路径。
<!-- 正确的选择：使用一致的图片目录 -->
<img src="assets/images/logo.png" alt="Logo">
03.03 清除缓存与构建缓存的影响
有时浏览器缓存会继续服务旧的图片路径，导致你已经修正但仍显示错误。进行硬刷新（如按 Ctrl+Shift+R 或 Ctrl+F5）或清除浏览器缓存，必要时通过版本化文件名来避免缓存。
如果页面使用了服务工作者（Service Worker）来缓存资源，也要确保更新逻辑覆盖图片资源，避免服务工作者继续提供过期的图片。
04. 进阶注意点与最佳实践
04.01 使用正确的图片格式与响应式图片
为提升兼容性与加载速度，建议结合
此外，通过 srcset 和 sizes 实现响应式图片，在不同屏幕密度和宽度下提供合适的资源，有助于提高加载体验并降低带宽开销。
<picture><source srcset="images/photo.webp" type="image/webp"><img src="images/photo.jpg" alt="Photo">
</picture>
04.02 路径策略与构建过程的考虑
在多环境部署中，路径的处理最好与构建流程对齐。通过构建工具的公有路径选项、资产哈希、或输出目录配置，可以实现静态资源路径在开发、测试、生产环境之间的一致性。确保构建产物中的资源路径与实际部署路径匹配，以避免上线后再度出现图片不显示的问题。
实践要点：使用 统一的资源目录、尽量让图片资源在构建阶段就完成引用分析，避免运行时路径拼接导致的错误。
<!-- 通过 base 标签统一根路径（如适用） -->
<base href="/" />
<img src="assets/images/logo.png" alt="Logo">
通过上述步骤和实践，前端开发者可以在遇到 HTML 中图片不显示的问题时，快速定位根本原因、理解相对路径与绝对路径的差异，以及实施高效的修复与优化策略。
