React项目构建后背景图片无法显示问题求助

问题原因 #

你当前通过字符串拼接的方式使用require引入图片，开发环境下Webpack的dev server能正确解析路径，但生产构建后资源路径处理逻辑变化，拼接操作会导致路径解析异常；若部署在服务器非根目录下，默认的publicPath配置也会引发路径错误。

解决方案 #

方案1：修正require的使用方式 #

不要通过字符串拼接生成backgroundImage的值，直接用模板字符串包裹require的结果，确保Webpack正确处理资源路径：

<div 
  style={{ 
    backgroundImage: `url(${require("assets/img/bg.jpg")})`, 
    height: "400px", 
    backgroundSize: "cover", 
    backgroundPosition: "center top"
  }}
>

方案2：配置homepage（针对Create React App） #

如果项目是Create React App创建的，且部署在服务器子路径下，在package.json中添加homepage字段，确保构建后的资源路径正确：

{
  "homepage": "."
}

若部署在https://yourdomain.com/subpath/下，需设置为"homepage": "/subpath/"。

方案3：将图片移至public目录 #

把bg.jpg移动到项目根目录的public/img/文件夹下，直接使用绝对路径引用，这种方式无需Webpack处理，构建后资源路径会直接保留：

<div 
  style={{ 
    backgroundImage: "url(/img/bg.jpg)", 
    height: "400px", 
    backgroundSize: "cover", 
    backgroundPosition: "center top"
  }}
>

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari