Question 161632 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why isn’t my bg image rendering in Next 13 Reactjs app?

I thought this was a relatively straightforward thing to do but apparently not. I have a bg image in a global scss file that does not wwant to render. It seems all of the other styles in the file are working and I don’t belive the file paths are the problem but I could be wrong since the new app dir in Next 13 is throwing me for a loop.
Any help would be appreciated, below is my folder structure and also the scss causing issues.
enter image description here

I’ll be happy to provide any other info as needed.

  • Also i get this error in the dev tools console: p://localhost:3000/public/bg.jpg 404 (Not Found) in some layout.css file that i dont see.
Tags:

2

Answers


  1. 0

    Please reframe from posting screenshots of code as it makes it very difficult to help debug.

    I believe the issue is that you are referencing the image inside the styles folder, but your image path isn’t pointing to the right directory.

    Because you provided no code in text form, I can’t test it, but replacing your path with

    ../public/bg.jpg

    should fix it.

    Login or Signup to reply.
  2. 0

    You don’t need to add public in path to access assets in public folder. You can simply do it like /bg.jpg to access the bg.jpg image in public folder. Files inside public folder can be referenced with the base URL /.

    I would still recommend you to keep all your images in an images folder and move that to an assets folder inside your public folder. Then you can access your images like this.
    /assets/images/bg.jpg

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search