Can't load the image on app.vercel.pub

[michalkordyzon]

Hello, When loading thumbnail image on my site on app.vercel.pub, I get the following message:

400: BAD_REQUEST
Code: INVALID_IMAGE_OPTIMIZE_REQUEST
ID: arn1::dkrnn-1692546290759-c5a96c14ad1b  

[1977744311]

I've deployed my website on my own Vercel instance, created a blog, and uploaded images, but it seems like the images are also not loading successfully. I'm encountering the same 400 error. How can I fix this? @steven-tey

[johnsonchandra]

you must add in next.config.js your vercel blob url, under images domains you can see the subdomain in your BLOB_READ_WRITE_TOKEN, in my case e.g. vercel_blob_rw_s2PJN3q94TmHvmPu_xxxxxxxxxxxx so you have to add 1 line:

images: { domains: [ ...., "s2pjn3q94tmhvmpu.public.blob.vercel-storage.com" ],

[steven-tey]

What @johnsonchandra said! Also, we recently made some updates in Next.js 14 to move from domains to remotePatterns – here's how you can do it:

module.exports = {
  images: {
    remotePatterns: [
      { hostname: "public.blob.vercel-storage.com" },
    ]
  },
};

Updated in the code as well: https://github.com/vercel/platforms/blob/main/next.config.js#L10-L21