Next.js Discord

Discord Forum

Obscure issue with images

Unanswered
Chausie posted this in #help-forum
Open in Discord
ChausieOP
Hi, I've either got a hella obscure issue with the next Image element or im being dumb in some way. I have a next app that i export as a static page and serve that as my static frontend. The issue comes in when i try displaying an image twice on the page. So for example, i use a logo in the navbar and in the footer, and that results in them now showing up no matter what i try; i have the logo in svg format, so i tried exporting the svg as a png and then using that for the footer, bit lesser quality but should still do fine. The only similarity between the files is the name, it being the same (logo.svg and logo.png) but i dont see how or why that should cause problems... In case i haven't mentioned it yet: usually either only one shows up or neither and in the case they're both missing; the website shows a missing image icon and displays the alt text. BUT THIS ONLY HAPPENS IF i export the page and upload it to my hosting provider. Literally every other image but that one (or in the current case, these two) image works just fine. I have figured out that it seems to be looking for them in the wrong place, some random dir inside the static _next folder that gets exported, instead of the base folder where the rest of the public images are... why? I myself have no idea. I've also messed around with next config options but haven't really found anything useful (disabling static images, disabling image optimization, using alternate image processors etc.). I can provide the source code but please DM me because reasons. Any help is welcome, please.

5 Replies

ChausieOP
Oh and I've also tried just making a component for the logo itself and then reusing that in places but that doesn't help either.
ChausieOP
More info:

The error im getting-
Failed to load resource: the server responded with a status of 404 ()

and the image src= looks like this:

src="/StAIKErwOryStoRf/_next/image/?url=.%2Flogo.png&w=640&q=75"

i would suspect it should look more like every other image on the page, for example:

src="./transport-icon.svg"


i did the whole spiel with next config:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    trailingSlash: true,
    output: 'export',
    images: {
        disableStaticImages: true,
        unoptimized: true
    },
};

export default nextConfig;
ChausieOP
thank you guys, very helpful
@Chausie thank you guys, very helpful
Amur catfish
did you ever figure it out?
getting the same issue and its making me so freaking annoyed