NextJs image optimization not working in Vercel production (400: BAD_REQUEST) with @payloadcms/storage-uploadthing

[poofy25]

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

1. Clone the repository

2. Create .env file using the .env.example file

3. Deploy to Vercel

Adapters and Plugins

@payloadcms/storage-uploadthing

[laamdev]

I'm getting the same error when trying to display images in a Vercel deployment using a Supabase S3 bucket. Any solutions?

[poofy25]

I'm getting the same error when trying to display images in a Vercel deployment using a Supabase S3 bucket. Any solutions?

So i found a workaround for this issue all you gotta do is add the website url in the image src path
For example

Before:
<Image src={image.url} ...>

After
<Image src={${process.env.WEBSITE_URL}${image.url}} />

[Dovchik]

giving absolute url doesn't works for me with Vercel blob: update - it works

[jmikrut]

Hey all, yes, as @poofy25 said, on your frontend, I believe you need to pass full URLs to the next/image component. I will convert this to a Discussion so that we can continue to help there!

[denisprado]

I am getting the same error.. you have any solution?

[JosephClay]

haven't had success using the full url recommendation. also, converting to a full url requires defining a remote pattern, which we shouldn't have to do on the same host (https://nextjs.org/docs/messages/next-image-unconfigured-host)

[abid-salahi]

This isn't working when using S3 bucket storage and Vercel deployment. Even using absolute urls.

[kotyperry]

Also getting this error still. @jmikrut Can we have someone relook into this?

[ShocKWavEv1]

Im also running with this issue, using absolute url does not fix the issue. Clicking and redirecting to the path it actually returns the image https://your-site/api/media/file/photo.png but when rendering in the next image getting the same error 400: BAD_REQUEST
Code: INVALID_IMAGE_OPTIMIZE_REQUEST
ID: sfo1::zr796-1724222305752-c64a4573adf7

[omelette-watin]

Same problem here, having absolute url doesnt fix it.
One temporary fix is to disable image optimization in nextjs image component with unoptimized

[denisprado]

I understand the argument to close the issue that the problem is with Next's image optimizer, but at the same time if Payload intends to have a default configuration that can be hosted on Vercel, the team needs to worry about this issue. Once there is a stable version available to a wider audience, this problem will make it impossible to use without headaches.