# `react-doctor/nextjs-no-img-element`

`import Image from 'next/image'` — provides automatic WebP/AVIF, lazy loading, and responsive srcset

- **Category:** Next.js
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** nextjs
- **Enabled when:** framework=nextjs and capabilities=nextjs

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Flags every native <img> JSX element except those inside an OG image route (path matches /og). False positive when the <img> is required inside an MDX/markdown renderer, sanitized email template, or third-party embed where next/image's loader cannot resolve runtime URLs.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Replace with <Image src={src} alt={alt} width={W} height={H} /> from next/image. For unknown dimensions use the fill prop with a positioned parent and a sizes attribute. Whitelist external hosts via images.remotePatterns in next.config.js. https://nextjs.org/docs/app/api-reference/components/image