이미지 불러오는 방법모음 - next.js

 

next에서 이미지를 불러오는 방법을 모아봤다.

 <방법1>
    import CampusImage from "public/landing/first_bg_round_real.svg";
    return( <CampusImage alt="campusImage" />)
    
    <방법2>
        return(<img src="/img/nexpus_logo.svg" alt="" />)  
    ==> public 경로명 제외해야 함!!

    <방법3>
    import  Image  from  "next/image";
    <Image
    src={employee.imageUrl}
    alt={employee.firstName}
    width={200}
    height={200}
    />

각 방법 중에 맞는 방법을 선택해서 사용해보자.

3번째는 next에서만 사용할 수 있는 next/image의 Image 태그이다.

다루기 조금 까다롭기 때문에 공식문서를 잘 읽어보고 사용해야 한다.

 

https://nextjs.org/docs/api-reference/next/image

next/image | Next.js