Next Image 속성

Next 공식 Image 예제 레포지토리

https://github.com/vercel/next.js/tree/fd9c524a72636844cc7091dd5aca713701ebb1f2/examples/image-component/app

기본 사용법

import Image from 'next/image'
 
export default function Page() {
  return (
    <div>
      <Image
        src="/profile.png"
        width={500}
        height={500}
        alt="Picture of the author"
      />
    </div>
  )
}

기본 필수값 속성

Property	Value	Type	Notes
src	src="/profile.png"	String	Required
width	width={500}	Integer (px)	Required
height	height={500}	Integer (px)	Required
alt	alt="Picture of the author"	String	Required

전체 속성

Property	Value	Type	Notes
src	src="/profile.png"	String	Required
width	width={500}	Integer (px)	Required
height	height={500}	Integer (px)	Required
alt	alt="Picture of the author"	String	Required
loader	loader={imageLoader}	Function	Optional
fill	fill={true}	Boolean	Optional
sizes	sizes="(max-width: 768px) 100vw, 33vw"	String	Optional
quality	quality={80}	Integer (1-100)	Optional
priority	priority={true}	Boolean	Optional
placeholder	placeholder="blur"	String	Optional
style	style={{objectFit: "contain"}}	Object	Optional
onLoadingComplete	onLoadingComplete={img => done())}	Function	Deprecated
onLoad	onLoad={event => done())}	Function	Optional
onError	onError(event => fail()}	Function	Optional
loading	loading="lazy"	String	Optional
blurDataURL	blurDataURL="data:image/jpeg..."	String	Optional
overrideSrc	overrideSrc="/seo.png"	String	Optional

반응형으로 이미지를 보여주고 싶을때

종횡비를 모를때 이미지를 꽉 차게 표현하기 위해

부모태그를 감싸주고
style: objectFit 속성
size 태그와
fill 속성을 준다

import Image from 'next/image'
 
export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
      <Image
        src={photoUrl}
        alt="Picture of the author"
        sizes="300px"
        fill
        style={{
          objectFit: 'contain',
        }}
      />
    </div>
  )
}
``