Ich verwende Tailwind in meinen React-Projekten. Ich möchte einem Div ein Hintergrundbild hinzufügen, aber es wird der folgende Fehler angezeigt:
Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'
Ich füge die Kategorie „Rückenwind“ hinzu
bg-[url('../../icons/blog-hero-1.png')]
Beim Hinzufügen eines Hintergrundbilds ist die URL relativ zur aktuellen Datei und funktioniert auch beim Hinzufügen eines normalen Bildes über:
import Hero from "../../icons/blog-hero-1.png"
<div>
<img src={Hero} className="h-full rounded-3xl"></img>
</div>
Wer kann Ihnen helfen, die richtige URL anzugeben? HINWEIS: Zur besseren Veranschaulichung habe ich hier auch ein Codesandbox-Beispiel hinzugefügt, in dem ich versuche, ein Hintergrundbild in „Homepage.js“ zu importieren, aber es funktioniert nicht. https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您也可以使用以下方法获得相同的结果：
在您的
tailwind.config.js文件中：module.exports = { theme: { extend: { backgroundImage: { 'hero': "url('../../icons/blog-hero-1.png')" } }, }, plugins: [], }您只需在类中提及
bg-hero即可实现。