Bad request INVALID_IMAGE_OPTIMIZE_REQUEST when using the Image component with S3

[sballesteros]

Hello, not sure what I am doing wrong here:

next-config.js:

  images: {
    domains: ['bucket.region.amazonaws.com']
  }

JSX:

<Image src="https://bucket.region.amazonaws.com/path/to/file.jpg" {...others} />

Getting:

Bad request

INVALID_IMAGE_OPTIMIZE_REQUEST

when deploying on vercel.

Any idea?

Thanks!

[grndctrl]

I ran into the same wall, but I found out I had my images.domains missconfigured. Fixing that, solved it for me, so maybe double check the actual domain where you image is hosted?

[mk0y]

What's wrong with domain name here? It's correct. I'm also having this problem and can't solve it. I'm loading images from Contentful using ctfassets.net as domain but doesn't work.

[Ivaylo-Korakov]

@grndctrl is one of the most useless comments :) If you copy the domain he gave and ctrl+F it on the page you will immediately see that the domain is configured correctly. Right here your comment becomes pointless. Also, the person who asked the question clearly stated that HE DID THAT CORRECTLY and he is asking for help since THE THING YOU ARE SUGGESTING IS NOT WORKING. Why would you even point out a thing which is a copy-paste from the first line of the documentation about the Image tag in next js. We can all read the documentation just like he did and configured it correctly. He opened an issue for after he checked the docs.....

[CGaul]

I had the same Bad request INVALID_IMAGE_OPTIMIZE_REQUEST issue, while loading an Asset Image from Contentful and solved it by implementing a loader for the Next image instead of injecting a URL into the src argument.

So the following code resulted in the Bad request error:

import Image from "next/future/image"
import { Block, BLOCKS, Inline } from "@contentful/rich-text-types"

const contentfulRichTextRenderOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: (node: Block | Inline) => {
      return (
        <Image
          src={`https://${node.data.target.fields.file.url}`}
          height={node.data.target.fields.file.details.image.height}
          width={node.data.target.fields.file.details.image.width}
          alt={node.data.target.fields.description}
        />
      )
    },
  },
}

this returns a HTML img (again, which fails with the above 400 BAD REQUEST):

<img alt="" srcset="/_next/image?url=https%3A%2F%2F%2F%2Fimages.ctfassets.net..." src="/_next/image?url=https%3A%2F%2F%2F%2Fimages.ctfassets.net..." decoding="async" data-nimg="future" loading="lazy" style="color:transparent" width="2095" height="715">

while a loader implementation worked for me:

import { Block, BLOCKS, Inline } from "@contentful/rich-text-types"
import Image, { ImageLoaderProps } from "next/future/image"
import { ImageLoader } from "next/dist/client/future/image"


const contentfulImageLoader: ImageLoader = ({ src, width }: ImageLoaderProps) => {
  return `${src}?w=${width}`
}

const contentfulRichTextRenderOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: (node: Block | Inline) => {
      return (
        <Image
          loader={contentfulImageLoader}
          src={node.data.target.fields.file.url}
          height={node.data.target.fields.file.details.image.height}
          width={node.data.target.fields.file.details.image.width}
          alt={node.data.target.fields.description}
        />
      )
    },
  },
}

as stated in the comment below, this turns of next image optimization.

Thus it returns a HTML img without the /_next/image part:

<img alt="" srcset="//images.ctfassets.net/..." src="//images.ctfassets.net/..." decoding="async" data-nimg="future" loading="lazy" style="color:transparent;width:100%;height:auto;margin:1rem 0" width="2095" height="715">

on next.config.js I have the following configuration for contentful (I think however, domains is still enough to configure):

images: {
      domains: ["images.ctfassets.net"],
      remotePatterns: [
        {
          protocol: "https",
          hostname: "images.ctfassets.net",
        },
      ],
    },

hope this helps someone, too!

[rubengmurray]

Yep, this is the answer. It's just a bit weird why locally this isn't an issue.

I added the following for some Instagram images from their API and it fixed it immediately.

    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.cdninstagram.com',
      },
    ],

After a small amount of reading, I do think this is fairly well covered in the docs.

1. https://nextjs.org/docs/api-reference/next/image#src
2. https://nextjs.org/docs/api-reference/next/image#remote-patterns

[hassangulzar1]

I ran into the same error bro when I deployed the project on Vercel then contentful images not showing can you have any solution to resolve this?

[willslater]

Also having this issue? Any more information on how you resolved? Works fine locally.

[veronica-severyn]

Same here.. Works fine locally. But there's an issue once on Vercel. NextJS 11.1.2

[halchester]

In next.config.js file, you have to add the domain of your aws s3 bucket. For me, it's directly streamed from Express so I just need to add the backend URL to the config file.

[willslater]

Yeah, I realised I was using qa s3 bucket address stupidly, I think I also had issue from leaving / at the end so maybe try that if anyone experiencing the same.

[AryanJ-NYC]

I'm also having this problem now. The image renders just fine locally but craps out when on Vercel.

You can see the error on this page: https://scarce.city/marketplace/digital/QRRARE

It tries to fetch: https://scarce.city/_next/image?url=https%3A%2F%2FscannableNFTs.com%2Fart%2Fthumb%2FQRRARE.gif&w=828&q=50 which results in INVALID_IMAGE_OPTIMIZE_REQUEST.

My next.config:

const config = {
  images: {
    domains: [
      'arweave.net',
      'bitcorns.com',
      'cdn.bitcoincoaster.com',
      'cdn.sanity.io',
      'dankdirectory.files.wordpress.com',
      'fakeraredirectory.com',
      'fakeraredirectory.files.wordpress.com',
      'hosting.photobucket.com',
      'ipfs.io',
      'i.imgur.com',
      'mandelduck.herokuapp.com',
      'metadata.spellsofgenesis.com',
      'pepewtf.s3.amazonaws.com',
      'phunchkins.com',
      'public-scarce-city.s3.amazonaws.com',
      'rarejapanesenfts.com',
      'rarepepedirectory.com',
      'rarepepewallet.com',
      'scannablenfts.com', // <--- here it is
      'thewojakway.com',
      'xchain.io',
      'xcp.dankdirectory.site',
      'xcp.dankinfo.art',
      'xcpinata.s3.amazonaws.com',
    ],
  },
  env: {
    // my env
  },
};

[daveidivide]

What was your fix for this?

Everything seems fine on your site, so I assumeyou got it working?

[AryanJ-NYC]

It ended up being mismatching casing:

#20138 (comment)

[AryanJ-NYC]

Fun fact: the domains array is case sensitive so if you're trying to render an image from aBc.com but have abc.com in your domains array, it won't work.

[thmarinho]

Well you saved me a few hours...

[michalniem]

Any luck with this? I'm getting INVALID_IMAGE_OPTIMIZE_REQUEST on my arweave.net remote images. It's not consistent, I'm getting a 400 for random images, but the rest are working fine. Next: 12.2.0

[michalniem]

Ah, forgot to mention, that all images work locally for me. It's deployed into vercel. No diffs between those files regarding name convention.
This is working example: $domainName/image?url=https%3A%2F%2Farweave.net%2FHQavlBC_XQrOQ3RC_HN5_-BquDJ4LlBNmvcXt_8zfjM&w=384&q=75
This is NOT working example: $domainName/_next/image?url=https%3A%2F%2Farweave.net%2FWWs7dvunVtEtHyCO_HJanD5YpXCyuwd01EpypF3gDgA&w=384&q=75

[AryanJ-NYC]

Arweave is a rough one. Times out a ton for me so hard to diagnose.

[MirekR]

We think we have figured out when this happens. It seems like cache issue on the nextjs and vercel. If on the first request to arweave does not return image (for example when you try to requested before it's fully propagated on the arweave network), vercel/nextjs still cached "broken" response and until cache expires, it keeps returning 400 INVALID_IMAGE_OPTIMIZE_REQUEST response.

You can verify it, when you have broken link, add cache buster param to the url (like %3F_%3D123 => $domainName/_next/image?url=https%3A%2F%2Farweave.net%2FWWs7dvunVtEtHyCO_HJanD5YpXCyuwd01EpypF3gDgA%3F_%3D123&w=384&q=75
) and you should the image fine.

[f0-x]

Dear Mr @MirekR could you please explain how to implement this? I couldn't figure out how to do this, anyone?

[this-is-simon]

Dear Mr @MirekR could you please explain how to implement this? I couldn't figure out how to do this, anyone?

What @MirekR is suggesting is: You can add characters to the end of the image's url and it will "cache bust" the erroring image. For example if you have on the front end:
const imageToDisplay = data.urlImage
You can do:
const imageToDisplay = ${data.urlImage}?_=my-random-string Or more dynamically: `const imageToDisplay = `${data.urlImage}?_=${Date.now()}

It effectively removes caching from next/Image and makes it very expensive (in monetary terms) to retrieve images from vercel.

[jonasmarco]

Any Update?

[qruz-hq]

Having the exact same issue, but only on vercel, and no way of getting a hand on the error log for some reason

[f-deniyi]

If you are still having the error after setting up your next config correctly then try this, create a functionconst loaderProp = ({ src }) => { return src } then pass this function to the loader props of Image like <Image loader={loaderProp} />

[Eerkz]

this only turns off the the Image optimization.

[Coyas]

it works for me, but without optimizations its not the way

[riccardolardi]

I'm still having this issue - any update?

[g-freecss]

any updates on this issue? Same here

[FlugHeli]

I am new to Next.js and i have the same problem

[laszlo-horvath]

Update in 2023 June: I had the same problem for 1 particular image.

I ended up using the unoptimized prop on the Next <Image /> tag and it fixed the issue for me by disabling the Image Optimization for that image only.

[tdsilve]

This works for me

[TOcvfan]

me too

[wbcdev]

Thank you. This worked for my google maps places implementation.

[mertburakd]

any update on this issuse?

[4D5A90]

Same problem but returning an image from Route Handlers (look like this in production https://mydomain.vercel.app/_next/image?url=/api/images/1)

[arxkdev]

Same thing happening to me with an internal image route.

[erickreutz]

I'm also having this problem.

[fvermaut]

Same for me. To "solve" it I added the "unoptimized" prop on the Image component. Not ideal though.

[stcaterings]

same +1

[AbhayaShankar]

I am also facing the same Issue, any update on this ?

[KyrillGobber]

I deployed on vercel and had this issue. just adding "**.vercel.app" as hostname in remotePatters worked to solve this:

const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: '**.vercel.app',
            },
            {
                protocol: 'http',
                hostname: 'localhost',
                port: '3000',
                pathname: '/api/media/**',
            },
        ],
    }
}

[LaxAce]

I was able to fix this by ensuring that the Images folder in my public folder is started with a capital letter I so the file is named Images and not images. So it read as follows <Image src="/Images/logo.png" width={140} height={50} alt="Logo" />