Next.js 앱 이미지 넣는 방법

 

1. Next에서 제공하는 Image 태그 임포트

import Image from 'next/image';

 

2. 이미지 속성 정의

Next에서는 이미지 최적화 기능을 지원하고 있기 때문에 width, heigth 속성을 지정해주지 않으면 오류가 난다.

<Image 
className='mr-9 mb-3' 
width={500} 
height={500} 
src={companyInfo.image} 
alt='Meow 주식회사 대표이미지' 
/>

 

3. next.config.mjs 설정

만약 이미지 주소가 'https:/i.ibb.co/L0CSxK9/image.png' 라면 다음과 같이 작성하면 된다.

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'i.ibb.co',
        pathname: '/L9CSxK9/image.png',
      },
    ],
  },
};

 

만약 도메인만 작성하고 싶다면 pathname을 생략하면 된다.

 

 

오늘도 삽질 완료..^^