Nextjs export (static page) gives me the wrong path in css background-images

Question

After running next build and next export, I don't see images assigned in background-image in css. I discovered that the reason for this is a wrong path after doing the next export. Image path after page export to static files: file:///C:/Users/user/Documents/frontend/out/_next/static/css**/_next/static/media/logoR.8b482e024d38c471760fb327b4c4da3e.png**

(The bold font is the path that still doesn't exist in the file folder.) But the real path is: C:\Users\user\Documents\frontend\out\image\logoR.png

What do I need to do to make the path to the background-images fit correctly when doing the next export?

Zeeshan · Accepted Answer · 2022-05-17 14:04:12Z

0

Have you added your image loader in your next.config.js file?

If not add this code in your next.config.js file:

module.exports = {
    images: {
        loader: "imgix",
        path: "",
    },
};

Make sure your images are inside the PUBLIC folder.

answered May 17, 2022 at 14:04

Zeeshan

365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sirius · Accepted Answer · 2025-04-13 17:08:24Z

0

I had the exact same issue. I tried a lot of things none of them worked.

The path worked when I ran it locally with npm run dev. Then I exported it and opened the html file locally and it didn't work; the background was not loaded.

Turns out it had to be deployed. After I deployed the exported static site to CloudFlare it worked.

answered Apr 13 at 17:08

Sirius

721 silver badge8 bronze badges

Collectives™ on Stack Overflow

Nextjs export (static page) gives me the wrong path in css background-images

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related