Javascript 无法使用样式组件设置图标，但同一样式在"；中工作得非常好；。css"；文件

这是我正在使用的样式化组件，在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});
`;