nextjs config_error ai_generated true

错误:`next/image` 的 src 属性无效,远程图像不支持相对路径

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

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

其他格式: JSON · Markdown 中文 · English
95%修复率
88%置信度
1证据数
2023-11-01首次发现

版本兼容性

版本状态引入弃用备注
[email protected] active
[email protected] active
[email protected] active

根因分析

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

English

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

官方文档

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

解决方案

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

无效尝试

常见但无效的做法:

  1. 80% 失败

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

  2. 90% 失败

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