HTML图片添加失败求助：仅显示alt文本，图片无法正常显示

以下是针对你遇到的图片仅显示alt文本问题的常见原因和解决步骤：

• 文件名与扩展名验证
  检查图片实际文件名是否完全匹配Trulli.jpg：

  • 注意大小写差异，部分系统（如macOS、Linux）对文件名大小写敏感，若实际文件是trulli.jpg或Trulli.JPEG，都会导致路径匹配失败；
  • 确认系统没有隐藏文件扩展名，Windows默认会隐藏已知扩展名，可能你看到的Trulli.jpg实际是Trulli.jpg.txt，需在文件夹选项中开启「显示文件扩展名」选项进行确认。

• 文件路径确认
  确保图片文件与index.html处于同一目录下，可直接将图片拖拽至VS Code的项目文件面板，直观确认两者的层级关系，避免误将图片放在项目子文件夹或桌面（桌面路径与项目目录无关）。

• 标签语法规范
  你的img标签中属性与值之间存在多余空格，且width/height值未加引号，虽然多数浏览器兼容，但严格遵循标准写法能避免潜在问题：

  <img src="Trulli.jpg" width="100" height="100" alt="Trulli">
  

  同时建议完善alt属性的文本内容，提升页面可访问性。

• 清除浏览器缓存
  浏览器可能缓存了旧页面状态，按下Ctrl+F5（Windows/Linux）或Cmd+Shift+R（macOS）强制刷新页面，清除缓存后重新加载。

• 图片完整性检查
  用系统自带的图片查看器打开Trulli.jpg，确认图片文件未损坏。若无法打开，更换一张正常的测试图片验证。

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