{
  "id": "nextjs/invalid-image-src-relative-path",
  "signature": "Error: Invalid src prop on `next/image`, src must be a string and cannot be a relative path.",
  "signature_zh": "错误：`next/image` 上的 src 属性无效，src 必须是字符串且不能是相对路径。",
  "regex": "Error: Invalid src prop on `next/image`, src must be a string and cannot be a relative path\\.",
  "domain": "nextjs",
  "category": "config_error",
  "subcategory": null,
  "root_cause": "The `src` prop on the `next/image` component is a relative path (e.g., './image.png' or '../assets/img.jpg') instead of an absolute URL or a static import. Next.js requires either an absolute URL (for remote images) or a static import (for local images).",
  "root_cause_type": "generic",
  "root_cause_zh": "`next/image` 组件上的 `src` 属性是相对路径（例如 './image.png' 或 '../assets/img.jpg'），而不是绝对 URL 或静态导入。Next.js 要求对于远程图像使用绝对 URL，对于本地图像使用静态导入。",
  "versions": [
    {
      "version": "Next.js 13.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 14.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 14.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 15.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "A leading slash is still a relative path from the domain root, not an absolute URL. Next.js does not treat it as a valid local image path unless it is a static import.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Data URLs are strings but are not supported by `next/image` for optimization. The error may change to 'Invalid src prop' or 'Image optimization failed'.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "The loader prop customizes the image URL generation but does not change the requirement that src must be an absolute URL or static import. The validation still fails.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Use a static import for local images: import logo from './logo.png' and pass it as src.",
      "success_rate": 0.95,
      "how": "Use a static import for local images: import logo from './logo.png' and pass it as src.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use an absolute URL for remote images. Ensure the hostname is configured in next.config.js under images.remotePatterns.",
      "success_rate": 0.9,
      "how": "Use an absolute URL for remote images. Ensure the hostname is configured in next.config.js under images.remotePatterns.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Place the image in the 'public' directory (e.g., 'public/images/logo.png') and reference it with an absolute path from the root: '/images/logo.png'. This works because public files are served as static assets.",
      "success_rate": 0.85,
      "how": "Place the image in the 'public' directory (e.g., 'public/images/logo.png') and reference it with an absolute path from the root: '/images/logo.png'. This works because public files are served as static assets.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "对本地图像使用静态导入：import logo from './logo.png' 并将其作为 src 传递。",
    "对远程图像使用绝对 URL。确保主机名在 next.config.js 的 images.remotePatterns 下配置。",
    "将图像放在 'public' 目录中（例如 'public/images/logo.png'），并使用来自根目录的绝对路径引用：'/images/logo.png'。这是因为公共文件作为静态资源提供。"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://nextjs.org/docs/app/api-reference/components/image",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.9,
  "fix_success_rate": 0.95,
  "resolvable": "true",
  "first_seen": "2023-09-01",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}