GitHub Pages部署个人作品集时背景图片加载失败求助

现象 #

部署到GitHub Pages后，其他图片正常显示，但背景图片加载失败，浏览器控制台报错：

GET https://kabirthakur.github.io/assets/herobg-ecbfddc8.png 404. index-a71a2bc8.css:1

当前CSS中背景图片路径：

.bg-hero-pattern {
    background-image: url(/assets/herobg-ecbfddc8.png)
}

相关地址：

• GitHub Pages访问地址：https://kabirthakur.github.io/portfolio
• GitHub仓库地址：https://github.com/kabirthakur/portfolio

已尝试的方法 #

1. 在tailwind.config.js中设置上级目录相对路径：

backgroundImage: {
    "hero-pattern": "url('../src/assets/herobg.png')",
}

2. 尝试使用当前目录相对路径：

.bg-hero-pattern {
    background-image: url(./src/assets/herobg.png)
}

以上尝试均未解决404问题。

1. 修正绝对路径的基础前缀 #

你的Pages站点部署在子目录/portfolio/下，而非根域名根路径，所以当前CSS里的/assets/...会指向根域名的assets目录（不存在该资源），需要加上子目录前缀：

.bg-hero-pattern {
    background-image: url(/portfolio/assets/herobg-ecbfddc8.png)
}

2. 配置Tailwind适配子目录部署 #

如果用Tailwind自定义背景图，直接在配置文件里指定basePath，让所有资源路径自动适配子目录：

module.exports = {
  basePath: '/portfolio',
  backgroundImage: {
    "hero-pattern": "url('/assets/herobg.png')",
  },
  // 其他Tailwind配置...
}

3. 验证打包后的资源位置 #

去仓库的gh-pages分支（自动部署的目标分支）检查，确认assets/herobg-ecbfddc8.png是否存在。如果没有，说明打包工具（如Vite、Webpack）没把背景图正确输出到assets目录，需要调整打包配置，确保静态资源被正确复制。

4. 改用相对CSS文件的路径 #

如果绝对路径还是有问题，试试基于CSS文件位置的相对路径。假设CSS文件在/portfolio/css/目录下，路径写成：

.bg-hero-pattern {
    background-image: url('../assets/herobg-ecbfddc8.png')
}

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