Got an error Invalid src prop ('here is a link') on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`

Question

I am using the Image component from Next.js (it's a new feature of Next.js). I've tried to give the source URL:

{`${API}/user/photo/${blog.postedBy.username}`}

But it shows me this error. I also make changes in my next.config.js as

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

but nothing works for me. Please help if you know anything about this.

What `API`? Is it localhost? – Dragos Strugar Nov 28 '20 at 12:23 — Dragos Strugar, Nov 28 '20 at 12:23
In my case, restarting the server solved the problem. – Aug 04 '22 at 03:49 — , Aug 04 '22 at 03:49
in a basic form it only needs loader property – Clode Morales Pampanga III Dec 15 '22 at 03:10 — Clode Morales Pampanga III, Dec 15 '22 at 03:10

Sean Amarasinghe · Answer 1 · 2021-12-22T06:01:32.520

const src = `${API}/user/photo/${blog.postedBy.username}`;
    
<Image loader={() => src} src={src} width={500} height={500}/>

Here, loader is a function that generates the URLs for your image. It appends a root domain to your provided src, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic srcset generation, so that visitors to your site will be served an image that is the right size for their viewport.

score 21 · Answer 2 · answered May 13 '22 at 16:27

21

Edit next.config.js :

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
}

answered May 13 '22 at 16:27

Safaetul Ahasan Piyas

1,285
1
8
10

score 19 · Accepted Answer · edited May 31 '21 at 17:34

19

Yes, I finally got the answer. Make loader function to load it from the destination of the image.

const myLoader=({src})=>{
  return `${API}/user/photo/${blog.postedBy.username}`;
}

Use this loader function the loader attribute of an Image tag.

<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
    height={500}/>

This works for me perfectly

edited May 31 '21 at 17:34

Guilherme Lemmi

3,271
7
30
30

answered Apr 25 '21 at 12:50

TASKMASTER

831
1
8
15

1

that works! We can also use the `src` parameter, to make it more flexible: `const myLoader=({src})=>\`${API}${src}\`` – Guilherme Lemmi May 31 '21 at 17:36

score 13 · Answer 4 · answered Dec 10 '20 at 20:55

13

I had the same issue, You need to restart your dev server, you need to do that each time you make changes on your next.config.js file.

The API string should include the port. e.g. localhost:3001

answered Dec 10 '20 at 20:55

edgarlr

583
5
7

score 12 · Answer 5 · answered Dec 01 '22 at 23:22

There are a whole bunch of out-of-date answers here that suggest setting the domains key in next.config.js. As of Next 12.3.0 this is no longer correct; see: https://nextjs.org/docs/messages/next-image-unconfigured-host

Instead, one should use a remotePatterns property, which is a little more complicated than the old domains:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

Had to re-run next to remove error. `yarn run dev` – Dylan w Mar 21 '23 at 02:10 — Dylan w, Mar 21 '23 at 02:10

score 4 · Answer 6 · answered Jul 30 '22 at 06:55

Adding 'localhost' in the domains array will fix the issue,

Unfortunately nextJS didn't refresh the server automatically after configuration file(next.config.js) change.

You have to restart the server manually to reflect the changes.

You can also try by set reactStrictMode value reactStrictMode: true,

here is the full export object

module.exports = {
    reactStrictMode: true,
    images: {
        domains: [
            "localhost",
            process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
            "2.gravatar.com",
            "0.gravatar.com",
            "secure.gravatar.com",
        ],
    },
};

score 2 · Answer 7 · answered Jul 07 '22 at 05:06

2

Inside next.config.js file.

Add Image src domain name:

const nextConfig = {
  reactStrictMode: true,
  images : {
    domains : ['sangw.in', 'localhost', 'picsum.photos'] // <== Domain name
  }
}

module.exports = nextConfig

answered Jul 07 '22 at 05:06

Sangwin Gawande

7,658
8
48
66

score 1 · Answer 8 · answered Mar 10 '23 at 10:43

For Next.js 13 simply add below to the next.config;

const nextConfig = {
    experimental: {
        appDir: true,
    },
    swcMinify: true,
    optimizeFonts: true,
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "websitename.com",
            },
        ],
        minimumCacheTTL: 15000000,
    },
};

This will hopefully solve the problem..

score 1 · Answer 9 · answered Jul 13 '23 at 09:38

1

You have to Nothing just add this code in your next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ['localhost']
    }
}

module.exports = nextConfig

answered Jul 13 '23 at 09:38

Sharan Patel

11
1

score 0 · Answer 10 · answered Mar 03 '22 at 08:36

0

First of all add and restart the dev server.

domains: ['localhost']

And be sure to return the image link with http(s) protocole

image link with localhost:port/... is wrong , return as http://localhost/... ( or with https )

answered Mar 03 '22 at 08:36

mirik999

349
3
8

score 0 · Answer 11 · answered Nov 16 '22 at 11:46

0

I've faced the same issue, and my domains were correct. Deleting .next and node_modules folders, and running yarn/npm install fixed the issue.

answered Nov 16 '22 at 11:46

Kadir Zukorlic

11
1

score 0 · Answer 12 · edited Feb 19 '23 at 09:42

0

For me, in next.config.js,

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [ "abc.def.org", ]
  },
}

module.exports = nextConfig

and then in my Image tag

<Image
  unoptimized // for image caching, else error
  src={profile.picture}
  alt={profile.picture || "IMG"}
  width={60}
  height={60}
/>

edited Feb 19 '23 at 09:42

DavidW

29,336
6
55
86

answered Feb 19 '23 at 09:38

Kedar K

41
2
10

score 0 · Answer 13 · answered Mar 31 '23 at 07:09

I got this error Error: Invalid src prop

(https://www.example.com/media/catalog/product/b/m/bmg_0622_11.jpg) on next/image, hostname "www.example.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Now solve this issue for latest Next.js 13 + version next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        port: '',
        pathname: '/media/catalog/product/**',
      },
      
    ],
  },
}

module.exports = nextConfig

Now use without any error

    <Image
        src={imageurl}
        alt="ecommerce"
        className="object-cover object-center w-full h-full block" 
        width={800}
        height={500}
      />

and restart app using npm run dev or yarn dev

Got an error Invalid src prop ('here is a link') on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`

13 Answers13

Linked

Related