無法使用樣式組件設置圖標，但是相同的樣式在“.css”文件中工作得很好

Question

這是我正在使用的樣式組件，在 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);
`;

Answer 1

如果您解決了路徑，它將起作用。

這告訴 webpack 將該文件包含在包中。 與 CSS 導入不同，導入文件會為您提供字符串值。 此值是您可以在代碼中引用的最終路徑。

import path from "../../Icons/icons8-male-user-24.png";

export const Username = styled.input`
  background-image: url(${path});
`;

請參閱添加圖像 Fonts 和文件。