I’m trying to use image files located in the public folder of my Next.js project, but I’m receiving a "404 Not Found" error in the browser. I have made sure that the relevant image files are in the correct path, the file names and extensions are correct, and my configurations are accurate. Specifically, I’m using the image file like this:
body{
background-image: url(/public/frame.png);
}
I want to note that I have tested the same setup with regular HTML and CSS, and it works without any issues. However, when implementing it in my Next.js project, I encounter the "404 Not Found" error.
Here are my configurations:
Next.js version: 13.4.5
Do you have any suggestions or solutions? Why am I unable to use the image files in the public folder and getting a "404 Not Found" error?
Thank you in advance!
I expected the image located in the /public/images/frame.png path to be displayed as the background of the <body>
>Solution :
Remove the "public" from the path
just write
/frame.png
as mentioned in nextjs documentation https://nextjs.org/docs/app/building-your-application/optimizing/static-assets