首先检查图片路径是否正确，确认相对路径或绝对路径与实际文件位置一致；接着核对文件名大小写及扩展名拼写；最后利用浏览器开发者工具查看Network请求，排查404或403错误，逐步排除问题根源。
图片路径错误是HTML开发中常见问题，导致图片无法正常显示。排查这类问题需要从路径设置、文件位置、拼写等多个方面入手。以下是几个实用的排查方法。
检查图片路径是否正确
路径错误是最常见的原因。确认你在 src 属性中写的路径与图片实际存放位置一致。
- 使用相对路径时，确保相对于当前HTML文件的位置准确。例如，图片在同级目录：
<img src="logo.png"> - 图片在子文件夹中（如images）：
<img src="images/logo.png"> - 图片在上级目录：
<img src="../logo.png">
如果路径层级出错，浏览器就找不到资源。
核对文件名和扩展名
文件名区分大小写，特别是在Linux服务器或某些系统上。
立即学习“前端免费学习笔记（深入）”；
- 检查拼写错误，比如把
image.jpg写成Image.jpg或image.png。 - 确认后缀名正确，常见格式有 .jpg、.png、.gif、.webp 等。
- 可以在浏览器开发者工具的“Network”标签中查看请求的资源是否404。
使用开发者工具定位问题
现代浏览器都内置了开发者工具，能快速发现问题。
- 右键点击页面上的图片占位区域，选择“检查”。
- 在“Network”选项卡中刷新页面，查找图片请求。
- 如果状态码是 404，说明路径无效；如果是 403，可能是权限问题。
- 查看请求的实际URL，对比你写的路径，找出差异。
尝试使用绝对路径或本地测试路径
为排除路径计算错误，可临时改用绝对路径测试。
- 本地绝对路径示例：
<img src="file:///C:/project/images/logo.png">（仅用于调试） - 项目根目录相对路径（适用于Web服务器）：
<img src="/images/logo.png">（以/开头指向站点根目录） - 确保服务器已启动，通过 http://localhost 访问，避免直接打开HTML文件导致路径异常。
基本上就这些。只要一步步检查路径结构、文件名、大小写和实际部署环境，大多数图片加载问题都能快速解决。不复杂但容易忽略细节。
