如何使用 Reactjs 在 css 文件中加載圖像

Question

我正在使用 Reactjs (Nextjs)，我將圖像文件夾放在“公共”文件夾和“style.css”文件中，我更改了路徑但圖像沒有顯示，我錯在哪里？ 這是我當前的代碼

background-image: url('/hero.jpg');

Answer 1

當您創建 Nextjs 應用程序時，您的 styles 位於 styles 文件夾中，因此您的路徑應該是

background-image: url('../public/{...maybe some folders in between}/hero.jpg');

Answer 2

可能是我弄錯了，但據我所知，React 禁止在 src 文件夾之外導入文件（即使在 css 中）。 因此，您可以對元素使用內聯樣式： style={{ backgroundImage: "url('/hero.jpg')" }} 或者嘗試更改文件夾以在 css 中使用它。 問候，

Answer 3

首先，將您的本地圖像導入到預期的文件中。

import bg from [your path] '../../images/bg.png';

<div style={{background: `url(${bg})`}}>
... ... ...
</div>