Next Js에서 img 오류 해결방법

수업 깃을 커밋하려는데 eslint에서 img태그를 사용할 수 없다는 경고가 뜸

Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint(@next/next/no-img-element)

구글링 해보니 img 태그를 쓰는 거보다 next.js 에서 제공해주는 이미지 컴포넌트를 쓰면 이미지 성능에 최적화된다고 eslint에서 경고를 보여주는 거라고 한다.


[참고]https://codemasterkimc.tistory.com/64

🖍 해결방법

import Image from "next/image";

상단에 Image를 import 해주고,
태그를 아래와 같이 변경하면 경고는 사라짐!

// 변경 전
<img src={dogUrl} />

// 변경 후
<Image src="dogUrl" alt="dog" width={500} height={500} />