Github Pages部署后background-image: url()无法显示求助

• 适配Github Pages的子路径结构
  如果项目部署在username.github.io/repo-name/这类子路径下，相对路径会失效。可以改用带仓库名的根相对路径：

  background-image: url("/repo-name/assets/imgs/hotel.jpg");
  

  或者直接使用完整绝对URL：

  background-image: url("https://username.github.io/repo-name/assets/imgs/hotel.jpg");
  

• 确认资源上传与文件名一致性
  检查Github仓库中assets/imgs/hotel.jpg是否存在，文件名大小写要和代码完全匹配（Github区分大小写，本地系统可能不区分）。

• 调整框架构建配置（若使用前端框架）
  如果你用Vue、React等框架，需在配置文件中设置正确的publicPath。比如Vue的vue.config.js：

  module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/repo-name/' : '/'
  }
  

  构建后生成的路径会自动适配Github Pages的子路径。

• 移除转义字符
  代码中的"是HTML转义的双引号，替换为普通双引号或单引号：

  background-image: url("../../../assets/imgs/hotel.jpg");
  

• 通过开发者工具排查请求路径
  在浏览器开发者工具的「网络」面板中查看图片的请求URL，确认是否返回404，根据实际错误路径调整代码中的图片地址。

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