在 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})`,