CODEWITHSUNDEEP
amazon-s3next.jsvercel
Puttsche
Puttsche

Reputation: 405

INVALID_IMAGE_OPTIMIZE_REQUEST error with NextJS on production with Vercel

When I execute from my production server, one of my requests to retrieve a photo fails with a 400: BAD_REQUEST error. Code: INVALID_IMAGE_OPTIMIZE_REQUEST when I try to fetch an image from my production S3.

In staging, the request successfully retrieves this image on the production S3, and production is able to retrieve an image from the staging S3. Here is my next.config.js file.

module.exports = {
 ...
  reactStrictMode: true,
  images: {
    domains: [
      "localhost",
      "xxfiles-prod.s3.eu-west-3.amazonaws.com",
      "xxfiles-staging.s3.eu-west-3.amazonaws.com",
    ],
  },

Upvotes: 0

Views: 1644

Answers (2)

Mileta Avramovic
Mileta Avramovic

Reputation: 51

I had a similar problem in a project that involved a custom API route. The solution you provided worked for me as well.

The way I optimized the images was by using an absolute path. First, add the following configurations to the next.config.mjs

** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'www.example.com',
          port: '', // Leave empty if not using a specific port
          pathname: '/api/image/**',
        },
      ],
    },
  };
  
  export default nextConfig;

Now, in the component, use a path like this: src = "https://www.example.com/api/image/${image_name}"

In this case, the solution depends on the API implementation.

Upvotes: 0

Puttsche
Puttsche

Reputation: 405

The solution that currently works and that I've found was to remove the optimization by adding this prop unoptimized={true} to my <Image /> that wasn't displaying.

I'm open to hearing if you have a better solution to keep the optimization.

Upvotes: 1

Related Questions