如果在 HTML 文件中图片无法显示，通常是由于 图片路径错误 引起的。为了解决这个问题，你可以按照以下步骤逐一排查和修正图片路径：

---

1. 检查图片路径

确保图片路径的正确性。图片路径有两种类型：相对路径 和 绝对路径。

相对路径

相对路径是从 HTML 文件所在位置出发，指向图片文件的位置。比如：

• 同一目录下的图片：

  <img src="image.jpg" alt="Image">

• 子文件夹中的图片：

  <img src="images/image.jpg" alt="Image">

• 父文件夹中的图片：

  <img src="../image.jpg" alt="Image">

绝对路径

绝对路径是从根目录开始的完整路径，通常以 / 开头，或者使用完整的 URL 地址：

• 从网站根目录开始的路径：

  <img src="/images/image.jpg" alt="Image">

• 完整的 URL：

  <img src="http://www.example.com/images/image.jpg" alt="Image">

---

2. 检查文件名和扩展名

图片路径中的 文件名和扩展名 是否正确。确保：

• 文件名大小写匹配（因为大多数服务器区分大小写）。
• 图片的扩展名正确，如 .jpg、.png、.gif 等。

例如，图片文件名为 image.JPG，而代码中使用的是 image.jpg，这就会导致路径错误，图片无法加载。

---

3. 确认图片存在

检查图片文件是否确实存在于指定路径中。你可以：

• 直接在浏览器中输入图片的完整路径（例如 http://yourdomain.com/images/image.jpg），看是否能成功显示。
• 在本地文件管理器中检查文件是否在该目录下，或者是否发生了文件丢失。

---

4. 浏览器开发者工具

如果以上步骤无法解决问题，可以使用浏览器的 开发者工具（F12 或右键检查）来进一步调试：

1. 打开浏览器的开发者工具，切换到 Network（网络）标签页。
2. 刷新页面并查看图片的加载状态。如果路径错误，浏览器会显示 404 错误（找不到文件）或者其他相关错误。
3. 通过这个信息，可以确定图片路径错误的具体原因。

---

5. 清理缓存

浏览器可能会缓存旧的图片路径，尝试清理浏览器缓存或者以 隐私/无痕模式 重新加载页面，确保加载的是最新的图片路径。

---

6. 检查图片的权限

如果图片存在，但无法显示，可能是文件权限问题。确保图片文件和文件夹对 Web 服务器可读。你可以通过以下命令检查和更改文件权限：

chmod 644 /path/to/image.jpg  # 使文件可读
chmod 755 /path/to/images/    # 使文件夹可读取

---

7. 相对路径的上下文问题

如果 HTML 文件放置在子目录中，而图片路径使用相对路径，可能会由于不同目录间的路径层级问题导致错误。此时，可以尝试使用 ../ 或 / 来修正路径，或者将文件组织结构做适当调整。

例如：

• HTML 文件在 site/index.html 中，图片在 site/images/image.jpg 中，应该使用：

  <img src="images/image.jpg" alt="Image">

---

8. 使用浏览器中的完整路径检查

有时，图片可能是通过相对路径给定的，但如果该路径有问题，使用完整路径可以帮助找出问题。例如，使用：

<img src="http://localhost/images/image.jpg" alt="Image">

然后通过 Network 标签页查看返回的响应。

---

总结

修复图片路径错误的方法：

1. 确认路径正确性：相对路径、绝对路径，确保路径没有拼写错误。
2. 检查文件名和扩展名：确保大小写、扩展名正确。
3. 确保文件存在：确认文件在指定目录中，或者通过 URL 测试图片链接。
4. 使用开发者工具调试：检查浏览器控制台或 Network 标签页中的错误信息。
5. 清理浏览器缓存：确保缓存不影响加载。
6. 检查权限：确保图片文件有正确的读取权限。

通过这些步骤，你应该能够定位并修复 HTML 文件中图片路径错误导致的问题。其他原因导致的错误，请关注其他相关文章。