background image not showing in React

Question

Public>images>img-2.jpg

src>components>pages>Services.js>

      import React from 'react';       
      import '../../App.css';

      export default function Services() {
       return <h1 className='services'>SERVICES</h1>;
      }

src>>App.css>

      .services {
       background-image: url('/images/img-2.jpg');
      }

src>App.js>

      import React from "react";
      import './App.css';
      import Navbar from "./components/Navbar";
      import {Routes, Route} from 'react-router-dom';
      import Services from './components/pages/Services';

      function App(){
       return(
             <>
              <Navbar />
               <Routes>
                <Route path='/services' element={<Services />} />
               </Routes>
             </>
            )
      };

This is how I wrote the code. But the picture not working. Screenshot(Failed to compile)

Images are not displayed, how can I display images? Please help me.

Can you put on the question where you put the image file? It should be in public > images > img-2.jpg — Akza, Dec 05 '21 at 13:07
Does it means now the error is gone but the image not displayed? — Akza, Dec 05 '21 at 13:15
Have u tried ```background``` instead of ```background-image```? — Akza, Dec 05 '21 at 13:16
This errors means that the compiler didn't resolve the path, you should give the relative path from the image (for convetion the `src/assets/` is used for this) give a look on those: https://stackoverflow.com/questions/44643041/do-i-store-image-assets-in-public-or-src-in-reactjs https://create-react-app.dev/docs/adding-images-fonts-and-files/ — Cassiano Franco, Dec 05 '21 at 13:26
I took the images folder inside src, It's working. I don't know why it doesn't work from public folder. That's the problem. Now I have found an alternative solution. Many many thanks for my problem solving. — Ashik, Dec 05 '21 at 14:52

score 1 · Accepted Answer · answered Dec 05 '21 at 13:29

1

You shouldn't keep your images in the public folder. When using css inside the src folder you should use the relative path to the image file and during build react manages and updates the paths to their public build one.

src: https://github.com/facebook/create-react-app/issues/1248#issuecomment-266313612

If you want to keep your image inside public, you can try using '../../../../Public/images/img-2.jpg' as the path, altough it is recommended to keep your images inside src and let react manage them during compile.

answered Dec 05 '21 at 13:29

Thaynã Ferreira de Sousa

51
3

'../../../../Public/images/img-2.jpg' It's not working. When I took the images folder inside src, It's working. I don't know why it doesn't work from public folder. That's the problem. – Ashik Dec 05 '21 at 14:46
Now I have found an alternative solution. Thank you very much. – Ashik Dec 05 '21 at 15:02
Glad I could help! One of the reasons for images outside src not loading, even if you use a relative path, could be react not mapping the path correctly during compile time. Another reason is that if IRC the CRA webpack is configured to compile files only inside the src folder, excluding you image. – Thaynã Ferreira de Sousa Dec 07 '21 at 17:56

background image not showing in React

1 Answers1