使用样式组件在React.js中导入图像

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的React Starter

该文件肯定在指定的位置。

我加载不正确吗？

我应该提一下，我对此非常陌生（React和样式化组件）

Answer 1

您应该以以下方式导入图像（假设您已将Webpack配置为导入媒体资产）。

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

/* ... */

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