GitHub Pages无法显示项目图片，多种路径尝试无效求解决

核心问题分析 #

你遇到的问题集中在路径书写错误和误用GitHub预览链接两点，再配合部署配置检查就能解决。

具体解决方案 #

1. 修正相对路径写法

你的index.html在项目根目录，直接指向同级的img和icons文件夹即可：

• 头像图片（eu.jpeg）的正确路径：

  <img class="perfil__foto" src="img/eu.jpeg" alt="foto da autora">
  

  用./明确表示当前目录也可以，效果完全一致：

  <img class="perfil__foto" src="./img/eu.jpeg" alt="foto da autora">
  

• Instagram图标（instagram.svg）的正确路径：

  <a href="https://instagram.com/lauraperronigtr" class="header__link" title="Me acompanhe no Instagram" target="_blank">
    <img class="icon" src="icons/instagram.svg" alt="instagram">
  </a>
  

  GitHub、LinkedIn图标直接套用icons/github.svg、icons/linkedin.svg格式就行。

  你之前用的../icons/是错误写法——../代表上一级目录，但index.html已经在根目录，上一级不存在，所以路径无效。

2. 不要用GitHub Blob预览链接

你尝试的https://github.com/lauraperroni/site-portfolio-curso/blob/main/img/eu.jpeg是仓库文件的网页预览地址，不是图片的原始资源链接。如果一定要用绝对URL，需要把blob/main替换成raw/main，比如：

<img class="perfil__foto" src="https://github.com/lauraperroni/site-portfolio-curso/raw/main/img/eu.jpeg" alt="foto da autora">

但更推荐用相对路径，避免跨域或链接失效问题。

3. 确认GitHub Pages部署配置

进入仓库「Settings」→「Pages」页面，检查：

• Source选择的是main分支（或你实际提交代码的分支）
• Folder选择的是/(root)（根目录）
  如果配置错误，即使路径写对也加载不了资源。

4. 强制刷新清除缓存

部署完成后，浏览器可能缓存旧页面，按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新，或者用隐私浏览窗口查看最新效果。

验证方法 #

修改路径提交代码后，等1-2分钟部署完成，打开浏览器开发者工具（F12）切换到「Network」标签，刷新页面看图片请求状态：

• 状态为200，说明路径正确；
• 状态为404，检查路径拼写或部署分支是否有误。

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