这是我正在使用的样式组件，在HTML中，我无法看到我的图标如何在。css文件中工作相同的东西
// CSS
.name {
width: 70%;
height: 40px;
margin-top: 20px;
background-image: url("../../Icons/icons8-male-user-24.png");
background-position: 2% 50%;
background-repeat: no-repeat;
padding-left: 30px;
border: none;
background-color: rgb(255, 255, 255);
}
// js
export const Username = styled.input`
width: 70%;
height: 40px;
margin-top: 20px;
background-image: url("../../Icons/icons8-male-user-24.png");
background-position: 2% 50%;
background-repeat: no-repeat;
padding-left: 30px;
border: none;
background-color: rgb(255, 255, 255);
`;
如果您解析路径，它就会工作。
这会告诉webpack将该文件包含在包中。 与CSS导入不同，导入文件会给出一个字符串值。 此值是您可以在代码中引用的最终路径。
import path from "../../Icons/icons8-male-user-24.png";
export const Username = styled.input`
background-image: url(${path});
`;
请参见添加图像，字体和文件。
