← Back to rules

nextjs/no-img-element 정확성

An auto-fix is available for this rule.

작동 방식

더 느린 LCP 및 더 높은 대역폭 사용을 방지하기 위해 <img> 요소의 사용을 금지합니다.

왜 좋지 않은가?

<img> 요소는 성능 최적화가 되어 있지 않으며, 더 느린 LCP와 더 높은 대역폭 사용을 초래할 수 있습니다. next/image에서 제공하는 <Image />를 사용하면 이미지가 자동으로 최적화되어 정적 자산으로 제공됩니다.

예시

이 규칙에 대한 잘못된 코드 예시:

export function MyComponent() {
  return (
    <div>
      <img src="/test.png" alt="테스트 이미지" />
    </div>
  );
}

이 규칙에 대한 올바른 코드 예시:

import Image from "next/image";
import testImage from "./test.png";
export function MyComponent() {
  return (
    <div>
      <Image src={testImage} alt="테스트 이미지" />
    </div>
  );
}

사용 방법

구성 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용하세요:

Config (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스