01. 深入理解相对路径与文件结构的要点
01.1 相对路径的定义与核心原则
在静态网页开发中，相对路径用于定位资源相对于当前文档的位置。理解这一点是解决HTML 本地图片不显示问题的第一步，因为图片无法加载往往源于路径错位。
相对路径的核心在于从当前文件所在的位置出发，逐级向上或向下定位到目标资源。通过使用 ./、../ 等表达式，可以在复杂的目录结构中实现灵活的资源定位。
01.2 文件结构对照与引用规则
文件结构清晰是确保图片能正确加载的前提。常见做法是把图片放在一个独立的文件夹，如 images 或 assets/images，并在 HTML 中以相对路径指向该文件。
对于嵌套较深的页面，建立一个一致的目录约定可降低路径错误的概率。通过记录根路径相对位置，可以在多页面中保持引用的一致性，从而避免本地图片不显示的问题。
<img src="./images/logo.png" alt="站点Logo">01.3 常见错误的快速诊断要点
最常见的错误来自于把图片放在错误的目录或拼写不一致（包括大小写）。在本地开发阶段，路径要与实际文件结构逐一比对，确保资源存在且可访问。
若图片在浏览器中加载失败，优先检查当前 HTML 文件相对于图片的位置是否正确，以及是否存在合并打包后路径的变动。
02. 在HTML中引用本地图片的正确路径规则
02.1 构造相对路径的实战要点
在引用本地图片时，应该从当前 HTML 文件的位置出发，找到图片的实际相对路径。请避免使用只在服务器环境下成立的路径规则，在本地直接打开文件时也要确保路径可解析。
一个简单的规则是：若图片放在同一级目录的 images 文件夹中，则引用应为 ./images/your-image.jpg；若图片在父级目录的图片文件夹中，则应使用 ../images/your-image.jpg。
<img src="./images/photo.jpg" alt="本地图片示例">02.2 处理图片资源的推荐结构
为了避免路径混乱，建议建立固定的资源结构，例如把所有图片统一放在 assets/images 下，并在文档中统一以相对路径引用。
在这种结构下，保持文档与资源的相对位置稳定，是实现跨页面一致加载的关键。这样即使在本地测试时，也能快速定位没有显示的图片并修正路径。
<img src="../assets/images/banner.jpeg" alt="横幅图片">03. 常见文件结构错误及如何解决
03.1 图片路径错位的常见原因
常见原因包括：图片文件夹被移动、文件名大小写不一致、扩展名错误、以及在多级目录下未正确使用相对路径。
在本地对比实际路径时，务必确认图片实际存在于目标位置，并且链接中的路径与项目的实际结构完全匹配。如果把图片放在了未被引用到的位置，也会造成本地图片不显示的问题。
03.2 如何通过重构提升引用鲁棒性
采用统一的资源包结构能显著降低路径错误的概率。通过将图片统一放在 assets/images，并以固定模板引用，可以减少跨页面的路径差异。
引入一个清晰的命名约定（如统一小写、使用连字符分隔），同样有助于避免因大小写敏感导致的加载失败。
<img src="./assets/images/header.jpg" alt="页面头部图片">04. 如何通过浏览器控制台快速定位图片问题
04.1 使用网络面板查看资源加载状态
浏览器的开发者工具网络面板可以直接显示图片的加载状态（如 200、404）。通过查看请求的 URL 路径，可以快速判断是否是路径错误导致的本地图片不显示。
当遇到 404 错误时，对比实际文件系统路径与请求中的路径，找出不一致之处并进行修正。
04.2 根据报错调整路径的实用技巧
如果控制台显示路径错误，尝试从当前文档定位的角度逐步回退一级级路径，直到能正确定位到图片资源的位置。
在调试过程中，最重要的做法是一次只修改一个路径维度，以确保变动可控并能明确看到效果。
<!-- 失败示例 -->
<img src="/images/logo.png" alt="Logo"><!-- 纠正为本地相对路径 -->
<img src="./images/logo.png" alt="Logo">05. 实践示例与对比：绝对路径 vs 相对路径
05.1 示例A：同目录下图片的引用
在同一目录层级中放置图片时，相对路径是最直接且鲁棒的选择。这能确保从任意页面访问时都能正确加载。
通过固定的引用路径，可以避免因为部署位置变化而导致的资源加载失败。
<!-- 同目录下的图片 -->
<img src="./image-sample.jpg" alt="样例图片">在实际项目中，保持路径清晰并遵循一致性原则，有助于解决 本地图片不显示 的问题。
05.2 示例B：跨目录引用图片的对比
当图片位于父级目录的图片文件夹中时，需通过向上定位再向下定位的相对路径实现引用。
此时，路径的组合应以当前文档为起点，逐层往上寻找目标资源。
<!-- 跨目录引用示例 -->
<img src="../assets/images/banner.jpg" alt="横幅图片">通过对比两种路径的加载结果，可以更直观地理解如何在不同文件结构下正确引用本地图片，进而解决 HTML 本地图片不显示的问题。
