Reference file in public folder from CSS in create-react-app

Question

I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there). Now I am trying to reference this imag

Answer 1

Remove the extra .. in the relative path. :)

Answer 2

In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,

 background-image: url("/images/background.jpg");

references:

https://github.com/facebook/create-react-app/issues/829

https://create-react-app.dev/docs/using-the-public-folder/

Answer 3

Just use a / before the name, this will make it relative to the build output root, which includes anything in the public folder.

so for the question asked above:

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

the critical part being

/example.png 

refers to a file, example.png, that is in the public folder