# Error: Invalid src prop on `next/image`, src must be a string and cannot be a relative path.

- **ID:** `nextjs/invalid-image-src-relative-path`
- **Domain:** nextjs
- **Category:** config_error
- **Verification:** ai_generated
- **Fix Rate:** 95%

## 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).

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| Next.js 13.0 | active | — | — |
| Next.js 14.0 | active | — | — |
| Next.js 14.2 | active | — | — |
| Next.js 15.0 | active | — | — |

## Workarounds

1. **Use a static import for local images: import logo from './logo.png' and pass it as src.** (95% success)
   ```
   Use a static import for local images: import logo from './logo.png' and pass it as src.
   ```
2. **Use an absolute URL for remote images. Ensure the hostname is configured in next.config.js under images.remotePatterns.** (90% success)
   ```
   Use an absolute URL for remote images. Ensure the hostname is configured in next.config.js under images.remotePatterns.
   ```
3. **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.** (85% success)
   ```
   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.
   ```

## Dead Ends

- **** — 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% fail)
- **** — 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% fail)
- **** — 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% fail)