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);

Answer 1

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'],
    }
  }
});

Answer 2

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"
/>

Answer 3

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

Answer 4

This issue is due to next.js version 11. The issue has been fixed with the next@11.0.2-canary.4 version. You can update the version. The problem will be solved.

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

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.

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

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.

Answer 9

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

Then run the server again and try