400 bad request from next/image

Question

So I am trying to display images with next/image's component. However, the images are not being displayed. I believe this is because of a 400 bad request error next/image is giving me.

When I click on that URL, it says "The requested resource isn't a valid image" which is strange because after retrieving the image url from the backend, I AM able to download the image to see that it is a valid image, so this error is happening right after the image link is passed in the props of the component. Basically, my requests are correct, but next/image's interaction with the image url is being messed up. What's weird is that I also did not have this error a few days ago, and after not changing anything, I'm seeing this error.

I've configured the next.js config file like this, and the request to the backend does retrieve a downloadable image (next/image is just not displaying it correctly).

Here is my config file for next.js:

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const nextConfig = {
  images: {
    domains: [
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
    ],
  },
  
};


module.exports = withPlugins([[withImages]], nextConfig);

Anzio

I get this problem after updating next from 10.0.8 to 11. On 10 version all works fine – Filch

I'm facing the same issue with next 12. Running fine on local build but no images when deployed on Netlify – Jarlath

I have this problem, but I'm using strapi on docker and nextjs on vercel, so I don't know what's happening – Ninety

Answer 1

In my case, this issue happened only with the docker container. It turns out the issue was the Dockerfile that did not copy also the next.config.js file where I configured the image optimizations.

Basically, it was missing this line:

COPY --from=builder /app/next.config.js ./

this is the Dockerfile that I use:

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json ./
COPY public ./public
RUN  npm install --production

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

ENV PORT 3000
ENV NODE_ENV production

CMD ["npm", "start"]

If this helped you, please remember to vote and select the as correct answer

Dias

I am using docker and this did it. Thanks for sharing – Farcical

I wouldn't have caught this easily. Thanks, a lot. – Stonefish

Answer 2

I'm late for the topic, but hope my answer will help someone else.

Adding the domain's config into the next.config.js is not enough (only work for local):

module.exports = {
  ...
  images: {
    domains: ['firebasestorage.googleapis.com'],
  }
}

For production, you need to make sure that your "next" instance grabs that config.

So in my case, what I did to make it work is:

Before

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir
  }
});

After

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir,
    images: {
      domains: ['firebasestorage.googleapis.com'],
    }
  }
});

Negotiation

Which file are these changes in? – Janiculum

@RobSutcliffe -----> server.js – Flurry

Answer 3

Using loader function solves the issue. Don't know why. But updating the version is the best option.

<Image
    loader={()=>user.coverImage}
      src={user.coverImage}
      alt="user cover image"
      layout="fill"
      objectFit="cover"
/>

Stenophagous

Hi, @Shiroshan; Could you show us the reference of coverImage funtion? – Flurry

Answer 4

This issue is due to next.js version 11. The issue has been fixed with the [email protected] version. You can update the version. The problem will be solved.

Helsinki

I have the same issue and tried this (even later version than suggested as well) and still have the same issue. – Butterfingers

Are you currently using the latest version? @Butterfingers – Helsinki

Yes, i tried [email protected] as suggested and now on 11.1.3-canary.52 just to try. Unfortunately same issue. I am thinking it s something AWS side. But then, it works fine on local. – Butterfingers

I don't have information exactly. I am currently using 11.0.2-canary.22. I am not having any problems. I've never had this problem since -canary.4. You can try 11.0.2-canary.22. – Helsinki

Thank you for the comment. You are using AWS right? Will try 22 now. – Butterfingers

Yes i using AWS. Good luck :) – Helsinki

No luck im afraid – Butterfingers

Answer 5

Did you update your nextjs version ? it seems 10.1.X and newer have some problems... https://github.com/vercel/next.js/issues/23523

Florettaflorette

Answer 6

I had to add a domain name including www prefix into next.config.js. E.g. both googlapis.com and www.googleapis.com.

Stonemason

Answer 7

I imported the image first.

import product_1 from '../public/src/assets/images/ecommerce/product_img_01.jpg'

and then imported

import Image from 'next/image'

and used it as so.

<Image src={product_1} />

and everything worked fine in next version 12.3.1

Semipalmate

Answer 8

1. In your .env file put this code :

STRAPI_ASSETS_BASE_URL=http://127.0.0.1:1337 // your strapi domain    

2. Go to that page where your image component and put this code :

const { STRAPI_ASSETS_BASE_URL } = process.env;

3. Add STRAPI_ASSETS_BASE_URL in <Image src={}/>

<Image src={STRAPI_ASSETS_BASE_URL + p.thumbnail.data.attributes.url} height={500} width={500} alt="product-img"/>

4. In next.config.js file put below code:

images: {
     domains: ["127.0.0.1"],
},

It will 100% work.

Paco

Answer 9

In my next.config.mjs I had to replace the

images:{
   domains:[...]
}

with

images:{  
    remotePatterns: [
          {
              protocol: 'http',
              hostname: 'my-domain-address.com',
              port: '3000',
              pathname: 'file-path/**',
          }, 
    ]
}

Refer to the page here for details - next/image Un-configured Host

Donnelldonnelly

Answer 10

Run in console at proyect route: rm -rf .next/

Then run the server again and try

Elodiaelodie

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Dyslalia