React.js styled-components 导入图像并将其用作 div 背景

Question

我正在使用 styled-components 并尝试像这样设置背景图像

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 和 styled-components）

原文由 vedran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该按以下方式导入图像（假设您已配置 webpack 用于导入媒体资产）。

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

/* ... */

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

原文由 Ilja 发布，翻译遵循 CC BY-SA 3.0 许可协议