🏷️ <img>

자바스크립트에서 사용하던 것처럼 <img> 태그를 사용하여 이미지 삽입이 가능하다.

단, 주의해야 할 점이 하나 있는데, 다음과 같이 이름 뒤에 .src를 붙여주어야 한다는 것이다.

import logoImg from "@/assets/logo.png";

<Image src={logoImg.src} alt="A plate with food on it" />

하지만, 이러한 방법으로 이미지를 불러오는 것은 페이지 내 이미지 요소가 늘어날수록 렌더링 속도에 영향을 미칠 수 있기 때문에 최적화 된 방법이라고 말할 수는 없다.

Next.js에서는 이러한 문제를 해결하기 위해, Image 컴포넌트를 지원한다.

🏷️ <Image>

Next.js에서는 Image 컴포넌트를 지원하여, 페이지에서 이미지가 실제로 보이는 경우에만 이미지가 표시되도록 지연 로딩을 구현하는 등의 최적화를 자동으로 진행해준다.

import Image from "next/image";
import logoImg from "@/assets/logo.png";

<Image src={logoImg} alt="A plate with food on it" />

Image 컴포넌트를 사용할 때에는 이름 뒤에 .src를 붙이지 않는다는 점을 주의하자.

이 때, 로고 이미지와 같이 빠르게 로딩되어야 하는 이미지의 경우, 다음과 같이 priority 속성을 추가하여, 불필요한 깜빡임을 없앨 수 있다.

import Image from "next/image";
import logoImg from "@/assets/logo.png";

<Image src={logoImg} alt="A plate with food on it" priority />

다음과 같이 fill 속성을 추가하면, 부모 컴포넌트에서 정의된 공간을 채워서 이미지를 로드할 수 있다.

<Image src={logoImg} alt="A plate with food on it" fill />

fill은 이미지의 크기를 사전에 알 수 없을 때 사용하면 좋다.