React内联样式设置backgroundImage不显示，同路径CSS可正常生效原因

核心问题拆解 #

• 首先是代码书写疏漏：你写的背景图拼接语法不完整，模板字符串里的url(...)缺了右闭合括号，正确写法应该是url(${imageFilename})，哪怕路径正确，语法不闭合也会导致样式失效。你在DevTools里看到的完整写法大概率是贴代码时的笔误，但这类细节很容易踩坑。
• 最根本的差异是相对路径的解析逻辑完全不同：
  • 写在常规CSS文件里的相对路径，会被Webpack/Vite这类构建工具在打包阶段处理：工具会顺着CSS文件的目录位置解析你写的路径，找到对应图片资源，转换成打包后站点可直接访问的静态地址，所以能正常加载。
  • 写在JS内联样式里的纯字符串路径，会被原样输出到浏览器端：构建工具不会自动识别处理这类嵌在JS对象里的字符串路径，浏览器拿到路径后，是按照当前页面的访问URL来解析相对路径的，根本不知道你React组件文件在项目磁盘上的位置，自然找不到对应的图片。比如你当前访问的页面地址是https://your-site.com/login，浏览器看到../../../assets/img/picture.jpg的路径，会顺着当前URL往上拼接请求地址，最后实际发起的图片请求和你预期的位置完全对不上，自然只能加载出背景色，图片显示不出来。

适配动态切换场景的可行方案 #

• 把需要用到的背景图通过模块引入的方式交给构建工具处理，拿到可直接访问的真实路径后再赋值给内联样式：

  // 这里写的路径是相对于当前JS文件的位置，构建工具会自动返回打包后的可用地址
  const initialBg = require('../../../assets/img/picture.jpg');
  // 后续要动态切换的图片也用同样方式引入
  const bgSwitchList = [
    require('../../../assets/img/bg-1.jpg'),
    require('../../../assets/img/bg-2.jpg')
  ]
  
  const [currentBg, setCurrentBg] = useState(initialBg)
  
  <div 
    className="auth-page" 
    style={{
      backgroundImage: `url(${currentBg})`,
      backgroundColor: '#cccccc'
    }}
  >
  

• 如果图片数量较多不想逐个引入模块，可以把所有需要动态使用的背景图放到项目的public静态资源目录下，直接写以/开头的站点根路径（比如把图片放到public/assets/img/picture.jpg，路径就写/assets/img/picture.jpg），这类路径不需要构建工具处理，浏览器会直接从站点根目录查找资源，加载不受影响。

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