nextjs images ai_generated true

Error: Invalid src prop on `next/image`, hostname is not configured

ID: nextjs/next-image-unconfigured-host

Also available as: JSON · Markdown
97%Fix Rate
98%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

next/image requires explicit allowlist of external image hostnames.

generic

Workarounds

  1. 97% success Add the hostname to next.config.js images.remotePatterns 
    images: { remotePatterns: [{ hostname: 'example.com' }] }

    Sources: https://nextjs.org/docs/app/api-reference/components/image#remotepatterns

  2. 88% success For all subdomains, use a wildcard: { hostname: '**.example.com' } 
    Wildcard patterns match any subdomain

Dead Ends

Common approaches that don't work:

  1. Using a regular <img> tag instead 55% fail

    Loses Next.js image optimization (lazy loading, resizing, WebP)

  2. Setting unoptimized={true} on the Image component 50% fail

    Disables all optimization; images are served as-is

Error Chain

Frequently confused with: