인프런 커뮤니티 질문&답변
작성한 질문수
Image의 src에 경로를 작성하는 것과 import로 이미지를 가져와서 넣는 것의 차이가 궁금합니다!
해결된 질문
작성
·
33
0
<Image src="/logo.png" alt="로고" width={100} height={100} />
import Logo from "@/public/logo.png";
<Image src={Logo} alt="로고" width={100} height={100} />이 두가지 접근 방식의 차이가 있을까요?
답변 1
0
이정환 Winterlood
지식공유자
안녕하세요 이정환입니다.
문자열 경로를 활용할 경우 Next.js가 자체적으로 해당 이미지의 사이즈와 해상도를 파악할 수 없습니다. 따라서 적절한 최적화가 이루어지지 않을 수 있게 됩니다. 따라서 이 경우 이미지의 사이즈인 widht와 heigth를 명시적으로 설정해주어야 합니다.
반면 이미지 파일 자체를 import 하여 사용하는 경우 Next.js가 해당 이미지를 정적 파일로 처리해 이미지 사이즈나 해상도를 자동으로 파악하고 그에 맞게 적절한 최적화도 자동으로 이루어집니다.
답변 감사합니다!!