hostname "localhost" is not configured under images in your next.config.js

[web-programmer-here]

I followed the documentation from this repo https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress to setup a WordPress example.

When I do npm run dev I keep getting this error:

error - node_modules/next/dist/client/image.js (669:33) @ defaultLoader
Error: Invalid src prop (http://localhost:10068/wp-content/uploads/2021/12/sample.jpg) on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`

I created next.config.js in root folder and added this:

module.exports = {
  images: {
    domains: ['localhost'],
  },
}

but still getting this error message

node -v
v14.17.6

[thibautsabot]

Hello!

I'm not familiar with the cms-wordpress example, but if your images are inside your code repository, you don't have to add a domain at the start of the URL.

You can leverage the built-in static file serving and import your images from the public folder.
See: https://nextjs.org/docs/basic-features/static-file-serving

[frusciante189]

I'm having the same problem. Did you find a solution?

[joaopereirawd]

I got a similar problem like the image bellow.

The solution that I found was configure the hostname for images in the next.config.js so:

module.exports = {
    images: {
        domains: ['2.gravatar.com'],
    },
}

Hope it helps 🍻

[DemaPy]

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
        port: "1337",
        pathname: "/uploads/**/*",
      },
    ],
  },
};

export default nextConfig;