在 React JSX object 中设置背景图像 URL 的正确方法

Question

我想以我的风格 JS object 设置背景图像。 由于某种原因，以下不起作用，没有图像出现并且没有错误？

反应

const homeStyle = {
    width: '100%',
    height: '100vh',
    backgroundImage: 'url("../../assets/images/home.png")',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    paddingTop: '160px',
    paddingLeft: '400px'
  };

 <div style={homeStyle}></div>

有任何想法吗？

Answer 1

尝试使用导入图像

import Background from '../../assets/images/home.png';

并将 backgroundImage 属性替换为

backgroundImage: `url(${Background})`,