GitHub Pages中PNG图片无法显示的404问题求助

排查与解决步骤： #

• 核对路径与大小写：GitHub Pages文件系统严格区分大小写，先确认GitHub仓库里的文件路径是assets/pictures/logo.png还是assets/pictures/logo.PNG，确保HTML中src的路径和仓库里的完全一致（包括后缀大小写）。同时检查本地项目结构和GitHub仓库是否完全同步，避免本地有文件但未上传到仓库。
• 调整路径类型：
  • 若HTML文件不在项目根目录（比如放在docs/或pages/子文件夹），相对路径需对应调整，比如HTML在pages/index.html，路径要写成../assets/pictures/logo.png。
  • 推荐使用根相对路径（开头加/），比如/assets/pictures/logo.png，这种路径会从站点根目录开始查找，不受HTML文件所在位置影响。
• 检查部署状态：进入仓库的Settings > Pages页面，确认最新部署已完成且无报错，刚上传的文件可能需要几分钟才能生效。
• 强制刷新缓存：按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，避免浏览器缓存旧的错误路径。

示例调整代码（使用根相对路径）： #

<div class="logo">
  <a href="index.html">
    <img
      class="header__logo"
      id="logo1"
      src="/assets/pictures/logo.png"
      alt="FishEye Home page"
      tabindex="0"
    />
  </a>
</div>

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