Invalid src prop on next/image: hostname is not configured under images in your next.config.js

Filed under Next.js & React errors

Most likely causeAbout 10 min · 6 steps

Next.js only optimizes outside images from hosts you whitelist, and this image's host is not in next.config.js yet.

Copy the hostname from the error

Add it to images.remotePatterns

Restart the dev server

Fix it myself Use the AI prompt

Fastest route

Give your AI this prompt

Copy it, replace the bracketed part with your error, and send it.

Preview the prompt

I am getting this Next.js error: "Invalid src prop on next/image — hostname is not configured under images in your next.config.js".

The image URL is: [paste the full image src] and my next.config file currently looks like this: [paste config, or say it has no images section].

Please: 1) take the hostname out of my image URL, 2) add it to images in my config using remotePatterns with protocol https and pathname "/**" (or extend images.domains if that is the style my config already uses), 3) search my code for other remote image hosts that will hit the same error next, and add those too.

Constraints: do not replace next/image with a plain img tag, do not change my image layout or styling, make one change at a time, and remind me to restart the dev server or redeploy when you are done.

Fix it yourself

Follow the repair

Read the hostname straight out of the error. The message names the exact host it blocked — something like images.unsplash.com, or your storage host ending in supabase.co. That precise string is what the config needs: no https:// in front, no path after it. Copy it from the error rather than typing it from memory, because one wrong character is just a new entry that matches nothing.
Add it under images.remotePatterns in next.config.js. Open the config file at your project root and add an images section, or extend the one already there. Each entry pins the protocol and the hostname; the pathname "/**" allows images from any path on that host.
```
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
        pathname: "/**",
      },
    ],
  },
};

module.exports = nextConfig;
```
Restart the dev server (or redeploy). Config files are read once, at startup — they are not hot-reloaded like components. Stop the dev server and start it again, and the error clears. On your live site the same rule applies in the other direction: pushing the config change is not enough until the new build is actually deployed.
Add every host you actually use, one entry each. Repeat step 2 for each distinct host your app pulls images from: the stock photo service, your file storage bucket, user avatars from Google (served from lh3.googleusercontent.com), your CMS or CDN. Expect this error to return the first time a new source appears — that is the whitelist doing its job, and each return visit is a thirty-second fix. A wildcard pattern exists for genuine multi-subdomain setups, but exact hosts are the safer default.
On an older Next.js you may find images.domains instead. Projects scaffolded a while ago whitelist hosts with a plain list. If your config already has that shape and works, add the new host in the same style rather than mixing systems:
```
images: {
  domains: ["images.unsplash.com"],
},
```
New projects should use remotePatterns from step 2, which also pins the protocol so an http-only source cannot slip in unnoticed.
Still blocked? Check the src value itself. The src reaching next/image must be a complete URL starting with https:// (or http:// if that truly is the source). A remote image passed as a relative path, or a URL built from a missing environment variable so it starts with "undefined", fails in confusing ways that are not the whitelist's fault. And remember the opposite case: images in your public folder need no config at all — reference them as /image-name.png and skip this whole page.

Why this happensOptional explanation

The next/image component is not a dressed-up img tag. When it meets a remote image, your Next.js server downloads the original, produces resized versions in modern formats, and serves those — which is why Next.js images load so fast. But a server that fetches URLs on request is a tool that can be abused, so Next.js refuses to fetch from any host you have not explicitly approved in your config. This error is that refusal, working exactly as designed.

The approval list lives in next.config.js under images. Current projects use remotePatterns, where each entry pins a protocol and a hostname; older ones use a plain domains list. Two details cause most repeat failures: the config is only read when the server starts, so editing it without a restart changes nothing, and hostnames match exactly — the subdomain your files actually live on is a different entry from its parent domain.

Host never whitelisted: the image comes from a stock site, storage bucket, or provider that was never added to the config.
Right host, wrong entry: you whitelisted the main domain but the file is served from a subdomain, or the protocol in the pattern differs.
Config edited, server not restarted: the fix is sitting in the file, but the running server still uses the old config it loaded at startup.
A second host snuck in: avatars, thumbnails, or a CDN mirror introduced a new hostname that nobody added.

Quick answers

Why does Next.js block outside images at all?

Because next/image does not just display the file — your server fetches it, resizes it, and serves optimized copies. Without a whitelist, anyone could point your optimizer at arbitrary URLs and spend your server's bandwidth. The config list is your permission slip for each host.

Do images in my public folder need this?

No. Local images referenced like /logo.png are served by your own site and skip the whitelist completely. Only remote URLs — full https:// addresses pointing at other hosts — need an entry.

Can I just use a regular img tag to skip this?

You can, and the picture will load, but you give up automatic resizing, modern formats, and lazy loading, and Next.js will warn you about it in the console. The whitelist takes one minute and keeps all of that, so it is the real fix.

Invalid src prop on next/image: hostname is not configured under images in your next.config.js

Give your AI this prompt

Follow the repair

Quick answers

Related fixes

One fix, every Friday.