Comment fournir un chemin/URL pour l’image d’arrière-plan dans Tailwind ?

Question

J'utilise Tailwind dans mes projets React. Je souhaite ajouter une image d'arrière-plan dans un div mais l'erreur suivante s'affiche :

Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'

J'ajoute la catégorie vent arrière

bg-[url('../../icons/blog-hero-1.png')]

Pour ajouter une image d'arrière-plan, l'url est relative au fichier actuel, et fonctionne également lors de l'ajout d'une image normale via :

import Hero from "../../icons/blog-hero-1.png"
<div>
  <img src={Hero} className="h-full rounded-3xl"></img>
</div>

Qui peut vous indiquer comment donner la bonne URL ? REMARQUE : J'ai également ajouté ici un exemple de codesandbox pour une meilleure démonstration, dans lequel j'essaie d'importer une image d'arrière-plan dans "Homepage.js" mais cela ne fonctionne pas. https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js

Answer 1

Vous pouvez également obtenir le même résultat en utilisant :

Dans votre tailwind.config.jsfichier :

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

Il suffit de mentionner bg-hero en classe pour y parvenir.