I can't set background image in my scss file using create-react-app

#1

Hey guys,

I’m getting this error:

You attempted to import ../../../public/background_image.jpeg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

First I had image in src folder and got this error, then I tried to find the solution and found that you should have images in /public folder but I’m getting the same error.

What should I do?

Would really appreciate help, thanks!

#2

You shouldn’t use import in your scss file to use an image. Use a simple background-url: and give it path to a location where your image file lives.

#3

Put the image in public.

.my-cool-class {
  ...
  background-image: url('background_image.jpeg');
  ...
}
#4

I’m having the same problem and this

background-image: url(‘background_image.jpeg’);

doesn’t work and I have the image in the public folder :frowning:

#5