Images with INVALID_IMAGE_OPTIMIZE_REQUEST in Vercel deploy

[denisprado]

Link to reproduction

https://demo-sandy-two.vercel.app/

Payload Version

beta 52

Node Version

20x (Node in Vercel)

Next.js Version

15.0.0-rc.0

Describe the Bug

I'm having a problem with the images only when I deploy to Vercel. I did a fresh installation of beta 52, added an image to the home screen and deployed it to Vercel. The image is not displayed due to error

400: BAD_REQUEST Code: INVALID_IMAGE_OPTIMIZE_REQUEST

Reproduction Steps

Use a fresh installation of payloadcms 3.0 beta 52, create a page with an image, deploy do Vercel and open the url.

Adapters and Plugins

No response

[poofy25]

Here (https://github.com/payloadcms/payload/discussions/6704#discussioncomment-9821934), I opened the same exact issue about a month prior.

Basically the workaround I found is to give a website url before the image url

For example

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

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

[denisprado]

Here (https://github.com/payloadcms/payload/discussions/6704#discussioncomment-9821934), I opened the same exact issue about a month prior.

Basically the workaround I found is to give a website url before the image url

For example

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

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

Here (https://github.com/payloadcms/payload/discussions/6704#discussioncomment-9821934), I opened the same exact issue about a month prior.

Basically the workaround I found is to give a website url before the image url

For example

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

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

Unfortunately this approach does not worked for me.

[denisprado]

Worked for me using Aws s3 adapter (I guess it will be not necessary) and adding the parâmeter loader={() => src} to the Images components.

[marvinengelmann]

<Image
  src={`${process.env.NEXT_PUBLIC_URL}${image.url}`}
/>

This approach is working for me. I am using Vercel Blob store, Vercel Postgres and beta 53.

[marvinengelmann]

Worked for me using Aws s3 adapter (I guess it will be not necessary) and adding the parâmeter loader={() => src} to the Images components.

As far as I know, a custom loader that just returns the image url disables Vercel image optimization.

[denisprado]

Worked for me using Aws s3 adapter (I guess it will be not necessary) and adding the parâmeter loader={() => src} to the Images components.

As far as I know, a custom loader that just returns the image url disables Vercel image optimization.

May be, but if I only disable the optimization for entire app, the error continues.. with loader, the error stopped.

[denisprado]

Now, I am using an s3 bucket and an image loader like this:

const imageLoader = ({ src, width, quality }: ImageLoaderProps) => { const params = [w=${width}]; if (quality) { params.push(q=${quality}); } const paramsString = params.join("&"); returnhttps://${process.env.S3_BUCKET}.s3.${process.env.S3_REGION}.amazonaws.com/${src}?${paramsString}; };

to achieve image optimization. I don't think this is fully integrated with Payload's image sizes, but it makes it viable to continue using it.

[sharpsteelsoftware]

I have this same issue using Supabase as s3 storage deployed on Vercel

[jmikrut]

Hey all, the solution here is indeed to supply the next/image component with a full URL. Then you should be golden. If you still have issues, I'd suggest bringing the questions to Next.js itself because we don't have ownership over the next/image component.

Thanks for everyone chiming in with help / info on this thread!

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.