部署到GitHub Pages后图片无法显示问题求助

根因定位 #

你的GitHub Pages站点部署在子路径/module-1-proj/下，但项目内所有图片都使用了以/开头的根绝对路径引用，这类路径会直接从域名根目录查找资源，不会携带子路径前缀，导致实际请求地址和图片真实存储地址不匹配，触发404错误。

可选用的修复方法 #

• 改用相对路径引用：把所有图片路径开头的/替换为./，比如将/images/banner.png修改为./images/banner.png，相对路径会基于当前文件的所在路径自动拼接资源地址，天然适配子路径部署场景。
• 配置构建工具公共路径：如果你的项目是基于Vite、Vue CLI、Create React App等工具构建的，直接在构建配置文件中指定公共基础路径为你的仓库名即可，比如Vite的vite.config.js中添加配置项：

  export default {
    base: '/module-1-proj/'
  }
  

  后续打包生成的所有资源路径都会自动带上子路径前缀，无需手动修改每个资源的引用路径。
• Jekyll站点适配：如果你使用的是GitHub Pages默认支持的Jekyll静态站点，可以直接用内置变量拼接路径，比如将图片引用改为<img src="{{ site.baseurl }}/images/logo.png">，部署时Jekyll会自动把变量替换为你的站点子路径。

验证方式 #

修改完成后提交代码到GitHub仓库，等待1-3分钟让GitHub Pages完成部署，之后强制刷新页面清除本地缓存，即可看到图片正常加载。

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