recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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 :

1

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

1

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 :

1

2

3

4

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

P粉670107661P粉670107661359 Il y a quelques jours421

répondre à tous(1)je répondrai

  • P粉921165181

    P粉9211651812024-01-17 10:02:58

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

    Dans votre tailwind.config.jsfichier :

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    module.exports = {

      theme: {

        extend: {

          backgroundImage: {

            'hero': "url('../../icons/blog-hero-1.png')"

          }

        },

      },

      plugins: [],

    }

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

    répondre
    0
  • Annulerrépondre