Next.js Discord

Discord Forum

How to load background images from css i NextJS 14 (App router)

Answered
Quaid Ahmed posted this in #help-forum
Open in Discord
Quaid AhmedOP
NEXT JS 14: APP ROUTER
PATH: App/assets/css/plugin.css
.ui-icon { background-image: url(images/ui-icons_222222_256x240.png); }
images path : App/assets/images/

Error i got
./src/app/assets/css/plugins.css:4:0
Module not found: Can't resolve './images/ui-icons_222222_256x240.png'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/assets/css/plugins.css
Answered by Ray
try moving the image to public folder like /public/images/ui-icons_222222_256x240.png then
.ui-icon {
  background-image: url(/images/ui-icons_222222_256x240.png);
}
View full answer

8 Replies

Answer
@Ray try moving the image to `public` folder like `/public/images/ui-icons_222222_256x240.png` then ts .ui-icon { background-image: url(/images/ui-icons_222222_256x240.png); }
Quaid AhmedOP
Can you recommend where to place fonts, static images (like those in the public directory), and where to keep JavaScript files and CSS files for optimal performance and adherence to best practices?
and if you import the css file to the page, next will handle that for you too
Quaid AhmedOP
ok that's cool and i have script like bootstrap.js this is for all how i add them in layout using import or next/script