Wie kann ich in Tailwind einen Pfad/URL für ein Hintergrundbild bereitstellen?

Question

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

Answer 1

您也可以使用以下方法获得相同的结果：

在您的 tailwind.config.js 文件中：

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero': "url('../../icons/blog-hero-1.png')"
      }
    },
  },
  plugins: [],
}

您只需在类中提及 bg-hero 即可实现。