Skip to content

nextjs/no-img-element Correctness ​

✅ This rule is turned on by default.
🚧 An auto-fix is still under development.

What it does ​

Prevent the usage of <img> element due to slower LCP and higher bandwidth.

Why is this bad? ​

<img> elements are not optimized for performance and can result in slower LCP and higher bandwidth. Using <Image /> from next/image will automatically optimize images and serve them as static assets.

Examples ​

Examples of incorrect code for this rule:

javascript
export function MyComponent() {
  return (
    <div>
      <img src="/test.png" alt="Test picture" />
    </div>
  );
}

Examples of correct code for this rule:

javascript
import Image from "next/image";
import testImage from "./test.png";
export function MyComponent() {
  return (
    <div>
      <Image src={testImage} alt="Test picture" />
    </div>
  );
}

How to use ​

To enable this rule in the CLI or using the config file, you can use:

bash
oxlint --deny nextjs/no-img-element --nextjs-plugin
json
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-img-element": "error"
  }
}

References ​

Released under the MIT License.