0

I am working with Reactjs (Nextjs), i put my images folder in "public" folder and in "style.css" file i changed path but image is not showing,Where i am wrong ? Here is my current code

background-image: url('/hero.jpg');
  • there is a typo `background-image: url('./hero.jpg')`; add `.` – debugger Aug 25 '22 at 04:35
  • @debugger i am getting error "Module not found: Can't resolve './hero.jpg'" –  Aug 25 '22 at 04:52
  • I think you are using wrong path. Try using `` – debugger Aug 25 '22 at 04:54
  • "Here is my current code" - is this your current code in your CSS file or in a JS file? More context (i.e. code around this) would help to answer this. – Rylee Aug 25 '22 at 04:58
  • @Rylee my current code in "css" file ( already mentioned) –  Aug 25 '22 at 05:00
  • @debugger actually i am working in "css" file not js file –  Aug 25 '22 at 05:00
  • 2
    Need more information on the structure of your app. There's some existing similar questions that may help you out [#1](https://stackoverflow.com/questions/53793957/cannot-load-background-image-in-react) [#2](https://stackoverflow.com/questions/65125891/cant-resolve-images-img-2-jpg-in-e-react-react-demo-src) [#3](https://stackoverflow.com/questions/64625964/react-css-cant-use-image-from-public) – Rylee Aug 25 '22 at 05:29
  • Please provide the actual folder structure of the `public` folder. If the images are contained within another folder then that needs to be reflected on the path to the image. – juliomalves Aug 28 '22 at 00:16

2 Answers2

0

When you create a Nextjs app, your styles are in a styles folder so your path should be

background-image: url('../public/{...maybe some folders in between}/hero.jpg');
nicolas.hacala
  • 46
  • 5
0

first, import your local image into the expected file.

import bg from [your path] '../../images/bg.png';

<div style={{background: `url(${bg})`}}>
... ... ...
</div>
R. Mahbub
  • 342
  • 6
  • 14