NextJS Image not working when deployed
Unanswered
Danna posted this in #help-forum
DannaOP
Works fine in the development enviroment, but when deployed to firebase hosting - it shows up like this and doesn't render
136 Replies
<Image
alt="a basil leaf"
className="object-scale-down absolute md:w-4/12 w-11/12 md:rotate-0 rotate-[51deg] md:-top-1/3 -top-[17%] md:-left-20 -left-[10%] drop-shadow-img"
src="/resources/basil.png"
fill
/>What shows up in the build
<img alt="a basil leaf" loading="lazy" decoding="async" data-nimg="fill" class="object-scale-down absolute md:w-4/12 w-11/12 md:rotate-0 rotate-[51deg] md:-top-1/3 -top-[17%] md:-left-20 -left-[10%] drop-shadow-img" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcset="/_next/image?url=%2Fresources%2Fbasil.png&w=640&q=75 640w, /_next/image?url=%2Fresources%2Fbasil.png&w=750&q=75 750w, /_next/image?url=%2Fresources%2Fbasil.png&w=828&q=75 828w, /_next/image?url=%2Fresources%2Fbasil.png&w=1080&q=75 1080w, /_next/image?url=%2Fresources%2Fbasil.png&w=1200&q=75 1200w, /_next/image?url=%2Fresources%2Fbasil.png&w=1920&q=75 1920w, /_next/image?url=%2Fresources%2Fbasil.png&w=2048&q=75 2048w, /_next/image?url=%2Fresources%2Fbasil.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fresources%2Fbasil.png&w=3840&q=75">DannaOP
would it be better to not have my images in the /public/resources/ folder?
(would it change anything if I removed /resources/ ?
I've found a github issue about the topic
but it's from 2020 . without a clear resolution.
any help would be great
any help would be great
@Danna but it's from 2020 . without a clear resolution.
any help would be great
have you tried importing the image with an
import statement as inimport Basil from "/resources/basil.png"
and then
<Image src={Basil} .../>DannaOP
yep! sadly changes nothing
here's another thread detailling the issue
no idea if an "official" solution has been found tho... I'm not sure if using a workaround is better than simply using a normal <img> tag
because the <img> on its own works fine
@Danna no idea if an "official" solution has been found tho... I'm not sure if using a workaround is better than simply using a normal <img> tag
any errs in your console? any deployment errs?
@Dayo any errs in your console? any deployment errs?
DannaOP
well, I only get the 404 error once it's deployed to firebase hosting.
it's exactly what's described in the github issue
it's exactly what's described in the github issue
the image loads just fine on localhost
website link btw
right now my images are too slow and performance is rather awful so my plan is to convert everything to the nextJS Image component
but things just arent working out 😅
@Danna https://makeithealthy-dce64.firebaseapp.com/
weird. taking a closer look
what version of Next are you using?
DannaOP
"next": "13.4.4",@Danna what do you think about this?
DannaOP
I think I'll just try this and see how it goes
...
can you try deploying to say Vercel to see if it's strictly a Firebase issue
DannaOP
uh, sure. I'll have to check how to deploy to vercel first but I'll try
I'll ping you once it's done
but you have several other images on the website. does it mean those aren't in the public folder?
@Dayo but you have several other images on the website. does it mean those aren't in the public folder?
DannaOP
those are using just a plain
<img>okay
before you try Vercel, try moving the image to a different folder. maybe
src/assets/images and see if it worksDannaOP
yeah no, it doesn't like that at all
import googlePlayBadge from "../../imageTest/gplayBadge.png";do you not have alias imports?
@DirtyCajunRice | AppDir do you not have alias imports?
DannaOP
huh, what would that change?
oh. i just read into that. that's actually really neat. didn't know about those
but it theoretically shouldn't change anything, no?
trying it with vercel right now ...
@Danna but it theoretically shouldn't change anything, no?
compilers are fickle things 🙂
you dont have a custom image loader anymore correct?
if you dont remove that its hard to have a control group
@DirtyCajunRice | AppDir you dont have a custom image loader anymore correct?
DannaOP
no, I don't have a custom image loader
also keep in mind you dont have any static image width/height
if it doesnt render this time, add width/height to the image. If it renders that time its because you are using fill and the wrapping div has no static size
this is to avoid CLS
DannaOP
I've tried with width / height and with fill. makes no difference sadly
Since you did the import?
DannaOP
which one ? 😅
@/resources/googlethingy.png
since you alias imported it
DannaOP
oh, I haven't tried it with the alias import specifically. give me a minute
do it all at once
just to rule it all out
alias import + w + h + (make sure you committed the image to your repo)
i know the last one is dumb but rather say it 😂
the way it's set up right now
that warning doesnt have anything to do with your image tho
that warning is - i would assume - from improper theme class usage
well yeah. Whats inspect show?
DannaOP
the image folder sits at /src/images/ right now by the way
@DirtyCajunRice | AppDir well yeah. Whats inspect show?
DannaOP
<img alt="Google Play Badge" loading="lazy" width="180" height="37" decoding="async" data-nimg="1" class="drop-shadow-img" style="" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FgplayBadge.0354ac69.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FgplayBadge.0354ac69.png&w=384&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FgplayBadge.0354ac69.png&w=384&q=75">this is on localhost in dev mode
@Danna the image folder sits at /src/images/ right now by the way
and your alias import is aliased to @/src/*
?
@DirtyCajunRice | AppDir and your alias import is aliased to @/src/*
DannaOP
"paths": {
"@/*": ["./src/*"],
"@/images/": ["./src/images"]
}DannaOP
oh true, just realized 🤦â€â™‚ï¸
but still doesn't change a thing
baby steps 😛
DannaOP
😅
so it errors on dev now?
as in doesnt show the image
DannaOP
yeah, if imported via alias from /src/images/ it won't show.
The only way to get the images showing on dev is if I import them from the public folder
The only way to get the images showing on dev is if I import them from the public folder
then you have next config messed up
because you absolutely do not need to have them in public
DannaOP
/** @type {import('next').NextConfig} */
const nextConfig = {
};
module.exports = nextConfig;that's my next config tho 😅
and next version?
DannaOP
"next": "13.4.4",
and app dir?
DannaOP
yep
Can you screenshot your folders?
are you using next/image directly
or that random Image.js file
DannaOP
yeah, import Image from "next/image";
@DirtyCajunRice | AppDir or that random Image.js file
DannaOP
that's just something I've tried but removed again
but I believe that won't work with app directory
i have hundreds of images this way. So i am sure its not a bug
DannaOP
I have no idea how to move on honestly
another silly question: you have restarted dev server correct?
DannaOP
yeah ðŸ‘
oh my god 🤦â€â™‚ï¸
the import works
when copying the images files to the /images/ folder
the image somehow got corrupted or whatever
DannaOP
I copied it in there again
and it now loads
DannaOP
in the dev mode on localhost at least. now to try on firebase
... firebase?
DannaOP
firebase hosting!
i know what it is
just cant help if you are doing some static export thing
thats a whole other can of worms
DannaOP
ah, gotcha.
if firebase really is the problem ... i gues vercel is where I'll deploy for now?
I just used firebase because of its ease of use
if firebase really is the problem ... i gues vercel is where I'll deploy for now?
I just used firebase because of its ease of use
yeah, sadly still won't show on firebase 🤦â€â™‚ï¸
@DirtyCajunRice | AppDir just cant help if you are doing some static export thing
DannaOP
also, I don't believe it's really a static export on there. it uses the new firebase fullstack thing. but I'll probably save myself some headache moving away
@Danna also, I don't believe it's really a static export on there. it uses the new firebase fullstack thing. but I'll probably save myself some headache moving away
i mean its free to just throw it up on vercel real quick to check
but id bet the farm that it works
that is config lol
any other errors?
it will full error if your eslint tells it to
escape your apostrophies lol
@DirtyCajunRice | AppDir it will full error if your eslint tells it to
DannaOP
it works on vercel
DannaOP
i officially hate firebase
ðŸ‘