HTML图片路径分相对路径（如 ./img.jpg）、绝对路径（含域名）或根目录路径（ /images/img.jpg），本地图片常用相对/绝对路径，网络图片需完整URL，注意路径大小写敏感，确保文件
相对路径
同级目录
| 说明 | 示例代码 | 结果 |
| 图片与HTML文件在同一目录下 | <img src="image.jpg"> | 正确显示同级目录的图片 |
下级目录
| 说明 | 示例代码 | 结果 |
| 图片在HTML文件的子目录中 | <img src="images/photo.png"> | 正确显示子目录中的图片 |
上级目录
| 说明 | 示例代码 | 结果 |
| 图片在HTML文件的上级目录 | <img src="../logo.png"> | 正确显示上级目录的图片 |
绝对路径
| 说明 | 示例代码 | 结果 |
| 从磁盘根目录开始定位（不推荐网页使用） | <img src="C:/Users/admin/image.jpg"> | 仅本地环境有效，部署后会失效 |
| 从网站根目录开始定位（推荐） | <img src="/assets/img/banner.jpg"> | 始终从网站根目录查找资源 |
根目录路径（推荐方式）
| 说明 | 示例代码 | 适用场景 |
| 使用斜杠从网站根目录开始定位 | <img src="/images/avatar.jpg"> | 项目目录重构时不易出错，适合多级目录结构 |
网络路径
| 说明 | 示例代码 | 注意事项 |
| 直接引用网络图片URL | <img src="https://example.com/image.jpg"> | 需确保网络连通，注意跨域问题 |
注意事项
| 常见问题 | 解决方案 |
| 路径拼写错误 | 检查文件名大小写（Linux服务器敏感）
确认目录层级关系 |
| 相对路径失效 | 使用开发者工具查看当前文件路径，调整相对路径层级 |
| 图片无法显示 | 尝试右键”检查元素”查看路径是否正确
确认图片文件是否存在 |
相关问题与解答
Q1：如何选择相对路径或根目录路径？
A1：小型项目可用相对路径，便于迁移；中大型项目建议使用根目录路径,避免因文件位置变动导致资源丢失。
Q2：为什么有时网络图片显示正常，本地图片却出现404？
A2：可能原因：
- 本地图片路径书写错误
- 服务器未配置正确的静态资源路径
- 文件权限不足（如Nginx
