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

[pnwatin]

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.

[sharpsteelsoftware]

I agree. Also, for this to work, we have to add localhost to the next config allowed remote paths. This seems odd -- if they are running in the same sever, a FQDN should not be required. I believe this logic could be pushed down into Payload. I also agree this is a pretty significant thing for the masses who are about to roll into Payload from nextjs. They just need the image component to simply work. Absolute URL is also not working for me with next/image and vercel blob -- now I'm hard blocked on this!!

[CarlosPProjects]

I was working with S3 bucket and Next.js 15 I just added "unoptimized" in the component and it solved the issue 😶‍🌫️

[joaoantoniorabelo]

I have update my nextConfig where I set a configuration for images with a front-end loader.

Images were upload when deployed.

File: next.config.js

const nextConfig = {
  images: {
     loader: 'custom',
     loaderFile: 'path/loader.js',
     …originalObject
  }
}

File: loader.js

'use client'

export default function imageLoader({ src, width, quality }) {
 const url = new URL(src);

 let directPath = url.pathname;
   
    if (url.pathname.startsWith('/api/media/file')) {
        let path = url.pathname.split('file');
        directPath = `media${path[1]}`;
    }
    

    return `${url.protocol}//${url.host}/${directPath}?w=${width}&q=${quality || 75}`;
}

https://nextjs.org/docs/pages/api-reference/components/image#loader