reactjs - React.js 样式组件导入图像并将其用作 div 背景

Question

我正在使用样式组件并尝试设置背景图像，如下所示

const HeaderImage= styled.div`
    background-image: url('../../assets/image.png');
';

我也尝试过不带引号，就像这样

const HeaderImage= styled.div`
        background-image: url(../../assets/image.png);
 ';

在这两种情况下，我得到相同的结果

http://localhost:3000/assets/image.png无法加载资源:服务器响应状态为 404(未找到)

我正在使用Richard Kall's react starter

该文件肯定位于指定位置。

我加载错误了吗？

我应该提到，我对此很陌生(React 和样式组件)

Answer 1

您应该按以下方式导入图像(假设您已配置 webpack 来导入媒体资源)。

import myImage from '../../assets/image.png';

/* ... */

const HeaderImage = styled.div`
  background-image: url(${myImage});
`;