QR卡片项目：HTML无法加载本地.png图片的原因求助

• 先明确文件层级关系
  相对路径的基准是你的HTML文件所在位置，举个正确的层级示例：

  MyFiles/
  └── QR_CARD/
      └── qr-code-component-main/
          ├── index.html  # 你的HTML文件
          └── images/
              └── image-qr-code.png
  

  如果是这种结构，你的img标签应该写成：

  <img src="./images/image-qr-code.png" alt="DogWater">
  

  你当前的路径MyFiles/QR_CARD/qr-code-component-main/images/image-qr-code.png是从系统根目录出发的绝对路径，但浏览器打开本地HTML时，相对路径是从HTML文件所在文件夹开始算的，所以前面的层级前缀会导致路径错误。

• 检查路径大小写
  如果你用的是macOS或Linux系统，文件名和文件夹名是大小写敏感的，比如Images和images、Image-QR-Code.png和image-qr-code.png会被识别成不同路径，必须完全匹配。

• 直接验证路径有效性
  打开网页后右键显示alt文本的区域，选择「检查」，在开发者工具里找到img标签，复制src里的路径到浏览器地址栏，回车看能不能打开图片：

  • 如果打不开：说明路径肯定错了，重新核对文件层级
  • 如果能打开：按Ctrl+F5强制刷新页面，清除浏览器缓存

• 确认文件扩展名无伪装
  Windows系统默认会隐藏已知文件扩展名，可能你的图片实际是image-qr-code.png.jpg（后缀被隐藏），可以在文件夹选项里开启「显示文件扩展名」，检查图片的真实后缀是否为.png

• 用绝对路径临时测试
  把src换成图片的本地绝对路径试试，比如：

  • Windows：src="C:/你的用户名/MyFiles/QR_CARD/qr-code-component-main/images/image-qr-code.png"
  • macOS/Linux：src="/Users/你的用户名/MyFiles/QR_CARD/qr-code-component-main/images/image-qr-code.png"
    如果能显示，说明相对路径的层级没搞对，再回到相对路径调整即可

内容的提问来源于stack exchange，提问作者H3llo-World-Dev