Next.js Discord

Discord Forum

Static Export

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hi I'm trying to do a static export and I did follow the guide here (https://nextjs.org/docs/app/building-your-application/deploying/static-exports). But my problem is that after I open the index.html, it doesn't seem to be able to open up the images that I put in there. I tried using img tag and Image tag but it was the same result. I only see the broken image icon.

17 Replies

Rafael Almeida
you need to serve the assets with a web server, just opening the html won't work. you can easily do that with serve: https://www.npmjs.com/package/serve
Asiatic LionOP
So I do have a folder called out where it has the html and the assets in there after doing the npm build command. I'm trying to upload them to the AWS S3 bucket as a static website. I see the css and html working fine but it's only the image that is broken.
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true,
    },
};

export default nextConfig;

this is what I have for next.config.mjs if that helps any better.
Rafael Almeida
can you check what is the src value of the image that Next is rendering on the HTML?
I just tried using the same config in a fresh project and the images are working
Asiatic LionOP
it's src="/24.jpg"
the full code is 
<img loading="lazy" decoding="async" data-nimg="fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;color:transparent" src="/24.jpg"/>
Rafael Almeida
do you see this file directly inside the out folder? like /out/24.jpg?
if you do then it might be a config issue on S3? 🤔
Asiatic LionOP
yes it's directly in the out folder like /out/24.jpg
But I actually changed the path in the html to src="24.jpg" and it at least displays it locally
let me try uploading it on AWS to see if it works now.
oh yeah it works now.
Rafael Almeida
:Susge:
changing it to "24.jpg" might not be a good idea because it will append the filename to the current URL
so if you are on app.com, it will request the image from app.com/24.jpg, but if you are on app.com/foo it will request the image from app.com/foo/24.jpg which will likely break it again
but its very weird that it worked when /24.jpg didn't work
Asiatic LionOP
I see. But it's just a single page so I won't have that issue but thanks for the hints haha