<Image /> tag from next doesn't show my image in production but shows in development
Unanswered
House Wren posted this in #help-forum
House WrenOP
The image is the small few lines under "What AI Can DO"
17 Replies
Common House-Martin
show the image code
House WrenOP
<div className="flex flex-col items-center lg:items-start lg:flex-row justify-center mb-4">
<h1 className="text-[#4640DE] text-3xl font-semibold">Discover</h1>
<div className="flex flex-col">
<h1 className="text-[#4640DE] text-3xl font-semibold lg:ml-2">
What AI Can Do For You
</h1>
<Image width={330} height={100} src={"/vector.png"} />
</div>
</div>Common House-Martin
looks good, did you upload this to vercel? is the image inside the public folder?
@Common House-Martin looks good, did you upload this to vercel? is the image inside the public folder?
House WrenOP
yes and it works fine in development
Common House-Martin
does it work with npm run build and start too?
House WrenOP
I didn't try that
should I type npm run build? will it affect the development files or the prod files tho?
Common House-Martin
it doesn't change any of the files, it bundles into the .next folder
when you upload to vercel, vercel does npm run build and npm run start
House WrenOP
yeah it works fine in npm run build
just like the dev built
Common House-Martin
that's off, is the image extension correct? like is it .png or .PNG
House WrenOP
I solved the problem
Common House-Martin
oh good what was it?
@House Wren I solved the problem
House WrenOP
I think it's a bug in NEXT.JS you can't host local images with the Image tag from 'next/image' you can only host SVG files
Common House-Martin
I had just deployed a portfolio for a friend this week and it had lots of images on the public folder although I deployed it in fly.io so it's probably a vercel thing
House WrenOP
Hmmm it's Vercel then