# 错误：`next/image` 上的 src 属性无效，src 必须是字符串且不能是相对路径。

- **ID:** `nextjs/invalid-image-src-relative-path`
- **领域:** nextjs
- **类别:** config_error
- **验证级别:** ai_generated
- **修复率:** 95%

## 根因

`next/image` 组件上的 `src` 属性是相对路径（例如 './image.png' 或 '../assets/img.jpg'），而不是绝对 URL 或静态导入。Next.js 要求对于远程图像使用绝对 URL，对于本地图像使用静态导入。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| Next.js 13.0 | active | — | — |
| Next.js 14.0 | active | — | — |
| Next.js 14.2 | active | — | — |
| Next.js 15.0 | active | — | — |

## 解决方案

1. ```
   对本地图像使用静态导入：import logo from './logo.png' 并将其作为 src 传递。
   ```
2. ```
   对远程图像使用绝对 URL。确保主机名在 next.config.js 的 images.remotePatterns 下配置。
   ```
3. ```
   将图像放在 'public' 目录中（例如 'public/images/logo.png'），并使用来自根目录的绝对路径引用：'/images/logo.png'。这是因为公共文件作为静态资源提供。
   ```

## 无效尝试

- **** — 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. (80% 失败率)
- **** — 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'. (70% 失败率)
- **** — 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. (60% 失败率)