[Next.js] Image, background-image 삽입하는 방법을 알아보자

next.js에서 이미지 삽입하는 방법을 알아보자!

 

image 삽입하는 방법

import Image from 'next/image';
import img from '../../assets/img.png';

<Image
  src={img}
  width={500}
  height={500}
  alt="클라이밍 사진"
/>

 

background-image 삽입하는 방법  

import img from '../assets/picture.jpeg';

<div style={{ backgroundImage: `url(${img.src})` }}
    className="h-full bg-center bg-cover cursor-pointer">
</div>