This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
NextJs image optimization not working in Vercel production (400: BAD_REQUEST) with @payloadcms/storage-uploadthing #6600
Labels
You can continue the conversation there. Go to discussion →
Link to reproduction
No response
Payload Version
3.0.0-beta.36
Node Version
v21.4.0
Next.js Version
15.0.0-rc.0
Describe the Bug
I can't fetch images from the local api and display them in an
component
In dev mode everything works fine
{ ... "url": "/api/media/file/137-92091.jpeg", ... }
I get the url from the media collection files and then display it in the
<Image/>
component as follows<Image className="h-full w-[50%] object-cover" src={blockData.image.url} alt="img" width="400" height="400" />
And it works just fine. The
<img/>
element then optimizes the image and returns this url/_next/image?url=%2Fapi%2Fmedia%2Ffile%2F137-92091.jpeg&w=640&q=75
and it works just fine in development mode.
But when i deployed it to Vercel when going to https://starbucks-clone-orpin.vercel.app/api/media/file/137-92091.jpeg the image loads but when the
<Image/>
component optimizes the image with the following url :/_next/image?url=%2Fapi%2Fmedia%2Ffile%2F137-92091.jpeg
it returns the following:
400: BAD_REQUEST Code: INVALID_IMAGE_OPTIMIZE_REQUEST ID: fra1::n89vt-1717417920074-c8806297edac
Reproduction Steps
Repository : https://github.com/poofy25/starbucks-clone
Clone the repository
Create .env file using the .env.example file
Deploy to Vercel
Adapters and Plugins
@payloadcms/storage-uploadthing
The text was updated successfully, but these errors were encountered: