Next.js 이미지 불러오기

Next.js 에서 이미지 불러오기 

 

이미지 불러오는 방법에는 여러 가지가 있지만 나는 내가 되는 방법 한가지만 설명하겠다.

 

많은 벨로그와 티스토리를 보고 시도했지만 왜 맨날 나만 안되는걸까?  결국 정답을 찾게 된건 공식문서였다.

Basic Features: Image Optimization | Next.js

 

상단에 import 해주고  참고로 이건 로컬 이미지임 (local image)(프로젝트 안에 이미지파일이 모여있음.)

import Image from 'next/image'

사용할 이미지 이름 과 경로를 불러온다. public 폴더 안 Img 폴더 안 logoDTP.png 파일이 있음.

import logo from "../../public/Img/logoDTP.png";

Image는 컴포넌트식으로 사용하며 src안에 사용자가 지은 이름을 {} 으로 넣고 이미지 설명과 크기 조절을 해준다. 

 

 <Image src={logo} alt="로고이미지" width={100} height={100} />

원격이미지는 src에 URL 문자열로 하면댐

   src="/me.png"

부디 원큐에 성공하셨기를 바랍니다.. 모두