React中如何将存储在变量中的图片设置为元素背景图

你当前的写法问题在于使用普通双引号包裹url路径，不会解析${}模板变量语法，替换为反引号包裹的模板字符串即可正常读取image2变量值。

正确代码示例 #

<header className="App-header" style={{ backgroundImage: `url(${image2})` }}>

额外注意事项 #

• 如果路径包含空格、特殊字符，建议在url内部额外加一层双引号包裹，写法如下：

  <header className="App-header" style={{ backgroundImage: `url("${image2}")` }}>
  

• 若你使用CRA、Vite等标准React脚手架：
  • 图片存放在public目录时，state中的路径不要加./前缀，改为/cryptolines.jpg即可
  • 图片存放在src目录时，需要先通过import导入资源再赋值给state，不能直接写相对路径字符串，示例如下：

    import cryptoLines from './cryptolines.jpg'
    const [image2, setImage2] = useState(cryptoLines);
    

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