How to background-image css in React.Js?

Question

This is my tree folder

├── public
│   ├── favicon.ico
│   ├── image.jpeg
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

This is my App.css

.App {
  text-align: center;
  background: url("/image.jpeg");
}

This is my App.js

import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>asdasdasd</h1>
    </div>
  );
}

export default App;

I'm triying to add background-image to App.js but react throws this message

Failed to compile.

./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Error: Can't resolve '/image.jpeg' in '/home/ivan/Documents/code/REactJs/portafolio/src'

I'm dev on ubuntu 20, node version is v12.19.0

BTW I created this app yesterday and I dosen't work, but I have an old app I created a month ago and It works fine.

husseinfawazbc · Accepted Answer · 2020-11-02 18:48:30Z

4

I don't think your App.css file can read images from your public folder, due to React's import restrictions from outside the src folder (The create-react-app imports restriction outside of src directory). Instead, add an inline style to App

import "./App.css";

function App() {
  return (
    <div className="App" style={{ backgroundImage: "url('/image.jpeg')" }}>
      <h1>asdasdasd</h1>
    </div>
  );
}

export default App;

edited Nov 2, 2020 at 18:48

answered Nov 2, 2020 at 15:49

husseinfawazbc

3411 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivandez Over a year ago

It worked but i want to know why i cant read images from public

husseinfawazbc Over a year ago

This has to do with React's import restrictions: stackoverflow.com/questions/44114436/…

Tamil Vendhan Kanagarasu · Accepted Answer · 2021-10-29 05:13:31Z

I have faced issues with background image urls.

On the internet, I found 2 answers:

If the images are kept in public directory, use absolute path.
If the images are kept in src directory, use relative path.

I have observed that these answers did not work if the css file or style is in one or more level deeper from the src directory.

├── public
│   ├── favicon.ico
│   ├── image.jpeg
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── a
    │   └── b
    │       ├── c.js
    │       └── c.css
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── images
    │   └── sample.png
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

The following would work, as .logo is kept in src/index.css:

.logo {
  background-image: url(images/sample.png)
}

But, the following will not, as the same is kept in a/b/c.css:

.logo {
  background-image: url(images/sample.png)
}

Finally, I learnt that, using absolute path works in all the scenarios. That is, the following works in all levels.

.logo {
  background-image: url(/images/sample.png)
}

The above also means that, using absolute path when the files are kept in public is not valid.

The whole thing is here.

Further reference:

Cristian Tirotta · Accepted Answer · 2020-11-02 15:37:07Z

-1

You are looking for image.jpeg in the wrong directory. Your image.jpeg is found in /public, so try looking for it in background: url("../public/image.jpeg"); instead of background: url("/image.jpeg");

answered Nov 2, 2020 at 15:37

Cristian Tirotta

1

2 Comments

Ivandez Over a year ago

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

Taslim A. Khan Over a year ago

This answer is not correct. The other answer works.

Collectives™ on Stack Overflow

How to background-image css in React.Js?

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related