nextjs config_error ai_generated true

Error: Invalid src prop on `next/image`, hostname "example.com" is not configured under images.remotePatterns

ID: nextjs/next-image-unconfigured-hostname

Also available as: JSON · Markdown · 中文
95%Fix Rate
88%Confidence
1Evidence
2023-08-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 13.0.0 active — — —
Next.js 14.0.0 active — — —
Next.js 14.2.0 active — — —

Root Cause

Next.js Image component requires external image hostnames to be explicitly allowed in next.config.js under images.remotePatterns for security and optimization; otherwise, it throws this error.

generic

中文

Next.js 的 Image 组件要求在 next.config.js 的 images.remotePatterns 中明确允许外部图片主机名，以确保安全和优化；否则会抛出此错误。

Official Documentation

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

Workarounds

  1. 95% success Add the hostname to next.config.js: 'images: { remotePatterns: [{ protocol: "https", hostname: "example.com" }] }' 
    Add the hostname to next.config.js: 'images: { remotePatterns: [{ protocol: "https", hostname: "example.com" }] }'
  2. 90% success If using Next.js 14+, use the 'images.unoptimized: true' config to disable all image optimization (not recommended for production). 
    If using Next.js 14+, use the 'images.unoptimized: true' config to disable all image optimization (not recommended for production).
  3. 95% success For multiple hostnames, add each one: 'images: { remotePatterns: [{ protocol: "https", hostname: "example.com" }, { protocol: "https", hostname: "cdn.example.com" }] }' 
    For multiple hostnames, add each one: 'images: { remotePatterns: [{ protocol: "https", hostname: "example.com" }, { protocol: "https", hostname: "cdn.example.com" }] }'

中文步骤

  1. Add the hostname to next.config.js: 'images: { remotePatterns: [{ protocol: "https", hostname: "example.com" }] }'
  2. If using Next.js 14+, use the 'images.unoptimized: true' config to disable all image optimization (not recommended for production).
  3. For multiple hostnames, add each one: 'images: { remotePatterns: [{ protocol: "https", hostname: "example.com" }, { protocol: "https", hostname: "cdn.example.com" }] }'

Dead Ends

Common approaches that don't work:

  1. 70% fail

    images.domains is deprecated since Next.js 13; images.remotePatterns is the required configuration.

  2. 60% fail

    remotePatterns requires explicit protocol and hostname; wildcards must be in the hostname field, not as a string pattern.

  3. 80% fail

    This bypasses optimization but still requires the hostname to be configured for security; the error persists.