nextjs config_error ai_generated true

Error: Invalid src prop on `next/image`, relative paths are not supported for remote images

ID: nextjs/next-image-src-relative-path

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

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —
[email protected] active — — —

Root Cause

The next/image component requires absolute URLs for remote images. Providing a relative path (e.g., '/images/photo.jpg') without a configured remotePatterns or loader causes this error, as Next.js cannot resolve the base URL for optimization.

generic

中文

next/image 组件要求远程图像使用绝对 URL。提供相对路径（例如 '/images/photo.jpg'）而没有配置 remotePatterns 或 loader 会导致此错误，因为 Next.js 无法解析优化所需的基 URL。

Official Documentation

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

Workarounds

  1. 95% success Use an absolute URL by constructing it from the environment variable or request host. 
    Use an absolute URL by constructing it from the environment variable or request host.
  2. 90% success Configure remotePatterns in next.config.js and use a relative path that matches the pattern. 
    Configure remotePatterns in next.config.js and use a relative path that matches the pattern.

中文步骤

  1. 通过环境变量或请求主机构造绝对 URL。
  2. 在 next.config.js 中配置 remotePatterns，并使用匹配模式的相对路径。

Dead Ends

Common approaches that don't work:

  1. 80% fail

    This still resolves to a relative path on the server, not an absolute URL; the error persists.

  2. 90% fail

    This disables optimization but doesn't fix the path resolution; the error still occurs.