I use Tailwind in my React projects. I want to add a background image in a div but it's showing the following error:
Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'
I am adding tailwind class
bg-[url('../../icons/blog-hero-1.png')]
is used to add a background image, the url is relative to the current file, and also works when adding a normal image via:
import Hero from "../../icons/blog-hero-1.png" <div> <img src={Hero} className="h-full rounded-3xl"></img> </div>
Can anyone guide how to give the correct URL? NOTE: I have also added a codesandbox example here for better demonstration, in which I try to import the background image in "Homepage.js" but it doesn't work. https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js
You can also use the following methods to achieve the same results:
In your
tailwind.config.js
file:You just need to mention
bg-hero
in the class to achieve it.