Css 样式化组件中的背景图像

晚上好

在将react与样式化组件结合使用时，我面临一个问题

我的图像文件夹位于：

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

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

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

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

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

---

这样的路径在运行时不可用（因为JS中的CSS像

样式化组件

在运行时创建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`)});
`;

---

这样的路径在运行时不可用（因为JS中的CSS，如

样式化组件

在运行时创建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`)});
`;

可能重复可能重复