Help with Image Loading Issue in Production (Next.js)
Unanswered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hello everyone,
I'm experiencing an issue in production where my images are no longer loading. Initially, it was only the .webp images that weren't working, but now all image extensions are affected. The requests return a 400 error with the message: "The requested resource isn't a valid image."
However, when I manually enter the image URL (/images/logo/logo.png), the image displays correctly
Could anyone please help me understand why this is happening and how I can fix it? I would really appreciate any advice or suggestions
Thank you so much in advance!
I'm experiencing an issue in production where my images are no longer loading. Initially, it was only the .webp images that weren't working, but now all image extensions are affected. The requests return a 400 error with the message: "The requested resource isn't a valid image."
However, when I manually enter the image URL (/images/logo/logo.png), the image displays correctly
Could anyone please help me understand why this is happening and how I can fix it? I would really appreciate any advice or suggestions
Thank you so much in advance!
13 Replies
Northeast Congo LionOP
Logs :
⨯ The requested resource isn't a valid image for /images/caterer.png received null
⨯ The requested resource isn't a valid image for /images/hero.png received null
⨯ The requested resource isn't a valid image for /images/logo/logo.png received null
⨯ The requested resource isn't a valid image for /images/poke1.png received null
⨯ The requested resource isn't a valid image for /images/hero.png received null
⨯ The requested resource isn't a valid image for /images/logo/logo.png received null
⨯ The requested resource isn't a valid image for /images/icons/cactus-1.png received null
⨯ The requested resource isn't a valid image for /images/hero.png received null
⨯ The requested resource isn't a valid image for /images/icons/cactus-1.png received nullsame
any resoultion 🤔
Argente Brun
been running to a similar issue as well, for now i have to use unoptimized <Image unoptimized={true}> to make things work. but still am looking for an actual fix for why its happening
@Northeast Congo Lion Hello everyone,
I'm experiencing an issue in production where my images are no longer loading. Initially, it was only the .webp images that weren't working, but now all image extensions are affected. The requests return a 400 error with the message: "The requested resource isn't a valid image."
However, when I manually enter the image URL (/images/logo/logo.png), the image displays correctly
Could anyone please help me understand why this is happening and how I can fix it? I would really appreciate any advice or suggestions
Thank you so much in advance!
Cassin's Kingbird
if u can, its better to just import the image onto whichever component your using it on
import logo from "@/../public/images/logo/logo.png";
...
<Image src={logo} alt="logo" />P.S. No need to fill out the height and width since nextjs will automatically do it on build time
Olive-sided Flycatcher
Hello!,
I don't see the path you're using, but I once got and error in production bc using relative path when import in dev mode works fine but, for production the realtive path is different, therefore is broken, so you need to use the entire path. Perhaps this could help you this time
I don't see the path you're using, but I once got and error in production bc using relative path when import in dev mode works fine but, for production the realtive path is different, therefore is broken, so you need to use the entire path. Perhaps this could help you this time
@Olive-sided Flycatcher Hello!,
I don't see the path you're using, but I once got and error in production bc using relative path when import in dev mode works fine but, for production the realtive path is different, therefore is broken, so you need to use the entire path. Perhaps this could help you this time
Cassin's Kingbird
It works in production too
Olive-sided Flycatcher
In that case I don't know what else to tell you, maybe a server limitation? To many images? Or something like that?
@Olive-sided Flycatcher In that case I don't know what else to tell you, maybe a server limitation? To many images? Or something like that?
Cassin's Kingbird
this path was especially for the OPs image
if ur image was located somewhere else in the public folder then u would need to change the path
for e.g. if ur file was at
it would be accessible at:
public/a/b.pngit would be accessible at:
import anyName from "@/../public/a/b.png"or if ur not using the src directory then the path would change again