0

I get an error when trying to add background image in react js.

This is my Directory

  ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
    Module not found: You attempted to import ../public/img/bg.jpg which falls outside of the project src/ directory.
    Relative imports outside of src/ are not supported.

My css:

   section{
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      background: url("../public/img/bg.jpg");
      background-attachment: fixed;
    }
    .container{
      position: relative;
      margin-top: 200vh;
      background: #fff;
      padding: 100px;
    }
Reporter
  • 3,897
  • 5
  • 33
  • 47
SATYAM CHOUDHARY
  • 1
  • 2
    Does this answer your question? [The create-react-app imports restriction outside of src directory](https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory) – jmargolisvt Jul 26 '21 at 13:48

2 Answers2

0

try to import this image inside of your component using from '../image.jpeg' before using this in your HTML tags, or remove the folder images from the public folder, I believe that for use in this way you will need to change the default setting for public files export.

Here you will find more information related to your question Link

Jorge Leite
  • 1
  • 1
  • 2
0

You can not access image or file that are included in public folder. If you want to use them you have to add those files into src directory instead of public.