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

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`)});
`;

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

background image in styled components react

css

reactjs

styled-components