nextjs/no-img-element Correctness

🚧 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:

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

Examples of correct code for this rule:

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:

CLI

oxlint --deny nextjs/no-img-element --nextjs-plugin

Config (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-img-element": "error"
  }
}

References

• Rule Source