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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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-heroen classe pour y parvenir.