Error: Invalid src prop (https://cdn.example.com/p/42.jpg) on `next/image`, hostname "cdn.example.com" is not configured under images in your `next.config.js`

Next.js · updated 2026-11-03

Thrown when a next/image component gets an absolute URL whose host is not allowed in next.config. It appears in development as soon as the image renders, and in production for images whose URLs come from data (a CMS, user uploads, a new CDN).

 ⨯ Error: Invalid src prop (https://cdn.example.com/p/42.jpg) on `next/image`, hostname "cdn.example.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
    at defaultLoader (node_modules/next/dist/shared/lib/image-loader.js:41:27)
    at ProductCard (./src/components/ProductCard.tsx:14:9)

Quick fix

Add the host to images.remotePatterns in next.config (protocol, hostname, and a pathname if you want to limit it), then restart next dev or rebuild. Avoid a wildcard for all hosts: it lets anyone use your server to optimize their images.

Copy the hostname from the error message.
Add an entry to images.remotePatterns with protocol and hostname (and pathname to narrow it).
Restart the dev server or rebuild: next.config changes are not hot-reloaded.
For images whose hosts you cannot predict (user-supplied URLs), proxy them through your own host or render them with a plain <img>.
If the host changed (a new CDN or storage bucket), update the pattern when you switch.

typescript

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com', pathname: '/p/**' },
      { protocol: 'https', hostname: '*.supabase.co' }, // storage buckets
    ],
  },
};

export default nextConfig;

Why it happens

A new image host

Moving images to a CDN, S3 bucket or CMS changes the hostname in every URL; existing remotePatterns entries no longer match.

URLs from content or users

A CMS editor or user pasting an image from a different site produces a host nobody configured, so one page fails in production while others work.

A pattern that is close but not exact

www.example.com vs example.com, a missing subdomain wildcard, or a pathname that does not match the real path all fail the same way.

Config changed without a restart

Editing next.config while next dev is running has no effect until the server restarts.

Other fixes

images.domains still works in older versions but is deprecated; prefer remotePatterns.
Set unoptimized on a single image to skip the optimizer for that one source.

Same error, other wording

Error: Invalid src prop on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js`
Error: Image is missing required "width" property.
Error: Invalid src prop (/uploads/a.png) on `next/image`. Failed to parse src.

Let your coding agent catch the next one

Runheed records this error in production with the stack trace, the breadcrumbs before it and the agent session that shipped the code, and serves it to Claude Code, Cursor or any MCP client. With it connected, you can ask:

> Find the 'hostname is not configured under images' errors, list the hostnames and the pages that used them, and add precise remotePatterns entries for the ones we trust.

Plans from $29/mo See what your agent reads See the setupCancel any time from the billing portal