next image static path

이미지 파일 본래의 크기를 계산해서 자동으로 높이와 너비를 계산하게 하려면 static path를 src에 넣자.

참고로, CLS도 막아준다.

아래처럼!

import Image from 'next/image'
import profilePic from '../assets/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

출처 : https://nextjs.org/docs/basic-features/image-optimization#local-images

단!!

만약 화면의 넓이만큼 이미지도 넓어지게 하고 싶다면? 그냥 일반 img태그를 쓰자