HTML页面img标签图片无法显示，路径排查及问题求助

根据你提供的信息，核心问题大概率是路径解析逻辑错误，结合你用的<img src="/uploads/house.jpg">和本地打开HTML的场景，给你针对性的解决方案：

1. 修正路径写法 #

你用的/uploads/house.jpg是网站根目录绝对路径，但直接双击打开HTML文件时，浏览器用的是file://协议，这个开头的斜杠会指向你电脑的系统根目录（比如Windows的C:\、Mac的/），而不是你的项目文件夹。

根据项目结构调整路径：

• 如果HTML文件和uploads文件夹在同一级目录，改成相对路径：

  <img src="uploads/house.jpg" style="width: 400px;" alt="glitch">
  

• 如果HTML在子文件夹里，比如html/index.html，而uploads在项目根目录，用上级路径跳转：

  <img src="../uploads/house.jpg" style="width: 400px;" alt="glitch">
  

2. 验证路径是否正确 #

• 右键浏览器里的图片占位符，选择「检查」，看控制台的404报错信息，确认浏览器实际请求的路径是不是你项目里的图片位置
• 把你写的路径复制到浏览器地址栏，能打开图片就说明路径是对的，直接用这个路径就行

3. 排查其他可能问题 #

• 文件名大小写：比如实际文件是House.jpg，但你写的house.jpg，本地打开可能没问题，但后续部署到服务器会报错
• 文件扩展名：确认图片实际是.jpg，不是.jpeg、.png这类你写错的格式
• 文件损坏：用本地图片查看器打开house.jpg，确认文件能正常显示

内容的提问来源于stack exchange，提问作者Micca