Next Js에서 Do not use <img> 오류 해결 하는 2가지 방법

---

 

 

이번 글을 통해 배워갈 내용

1. Next Js에서 Do not use <img> 해결 하는 방법
2. Next Js에서 Do not use <img> 오류 무시하는 방법

---

VS Code 로 Next JS 프로젝트를 진행하는 도중

 

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)

 

 

라는 문구가 나오면서 오류를 해결 하라고 나옵니다.

 

이는

 

HTML '<img>' 태그를 이용해서 이미지를 출력하는 것보다 Next.js에 탑재된 이미지 컴포넌트를 쓰면 이미지를 최적화하고 성능을 향상 시킬수 있어서 eslint가 경고를 보여주는 것입니다.

 

eslint 설정에서 경고 문구를 없앨수도 있으나 근본적인 해결 방법은 아닙니다.

따라서 아래 코드를

 

 <img src="/last_supper.png" alt="last supper" />

아래와 같이 수정해주고

<Image src="/last_supper.png" alt="last supper" width={640} height={320} />

상단에 Image를 임포트 해주면 됩니다.

import Image from "next/image";

전체 코드는 다음과 같습니다

import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import Image from "next/image";

const App = () => (
  <div>
    {/* <img src="/last_supper.png" alt="last supper" /> */}
    <Image src="/last_supper.png" alt="last supper" width={640} height={320} />
  </div>
);

export default App;

public에 최후의 만찬이라는 이미지를 사용했으며

로컬환경에서 정상 출력 확인 했습니다

---

방법2

 

만약 오류 문구를 무시하고 싶으시다면

 

  "rules": {
    // Other rules
    "@next/next/no-img-element": "off"
  }

 

위와 같은 법칙을 .eslintrc 파일에 추가해주시면 됩니다.

 

---

 

읽어주셔서 감사합니다

좋은 하루 되시길 바랍니다.

 

---

Reference 자료

https://nextjs.org/docs/messages/no-img-element

no-img-element | Next.js

---

블로그 추천 포스트

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---