Tailwind Image Background Using url() in React-CodePudding

I'm using React and Tailwind to build an app. I'm trying to set an image background for a div element using url() but it's not working. I've shared my code below. The project directory setup is the default when using create-react-app, however, I have added an "images" folder in the public folder where i'm storing the image to be used by the div element in question.

function App() {
  return <div className='h-screen w-screen bg-[url("/images/illustration-hero.svg")]'></div>;
}

I found the following code sample from Tailwind's website and need to do exactly this:

<div >
  <!-- ... -->
</div>

Kindly help me solve this issue...Thanks in advance

CodePudding user response：

You can't see the background image because you need the absolute path to the image if we use the background-image property. Reload CRA after changes.

Folder structure

/public
  /images
    illustration-hero.svg
  index.html
  ...
/src
  App.css
  App.js
  index.css
  index.js
  ...
package.json
tailwind.config.js
...

function App() {
  return <div className='h-screen w-screen bg-[url("../public/images/illustration-hero.svg")]'></div>;
}