React中CSS设置背景图不生效但img标签可正常加载图片如何解决

• 你使用styled-components编写CSS时，没有将已导入的图片变量传入url()参数，手写的静态相对路径无法适配打包后的目录结构：
  1. 前端项目打包时会对静态资源做重命名、路径改写处理，你导入的furnitureBG已经是处理后的正确可访问路径，但是你在CSS里直接写的相对路径../images/furniture-bg-7.png不会被打包工具识别替换，打包后路径会失效。
  2. styled-components的模板字符串中插入JS变量必须使用${变量名}的插值语法，直接写在字符串内部的内容会被识别为普通文本。

将导入的furnitureBG变量通过插值语法传入url()内即可，修改后代码如下：

import furnitureBG from '../images/furniture-bg-7.png';

const Container = styled.div`
    height: 100vh;
    width: 100vw;
    background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url(${furnitureBG});
`

内容的提问来源于stack exchange，提问作者Hunter Scott Lacefield