样式组件中的背景图像反应

Question

晚上好。

我在将 React 与样式组件结合使用时遇到问题。

我有一个图像文件夹位于：

我的样式组件位于以下文件夹中：

在样式化组件内，我尝试像这样导入图像：

const FormImage = styled.div`
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-top: -20%;
    background-image: url(../../img/testlogo.png);
`;

我确信这是正确的道路。但不知何故，图像没有显示在浏览器中。

这是我在浏览器中看到的：

Answer 1

这样的路径在运行时不可用（就像 CSS-in-JS 一样styled-component在运行时创建 CSS，尽管有非运行时的解决方案），您应该尝试以下方法之一：

import ImgSrc from '../../img/testlogo.png';
const FormImage = styled.div`
    background-image: url(${ImgSrc});
`;

// or
const FormImage = styled.div`
    background-image: url(${require(`../../img/testlogo.png`)});
`;