Today I Learned
[next] image tag
떼굴펜
2024. 6. 28. 16:44
사용 예시
import Image from 'next/image' export default function Page() {
return ( <Image src="/profile.png" width={500} height={500} alt="Picture of the author" /> )
}
props
이름 | isRequired | type | example |
src | O | string | src="/profile.png" |
width | O | integer (px) | |
height | O | integer (px) | |
alt | O | string | |
loader | function | loader={imageLoader} | |
fill | boolean | fill={true} | |
sizes | string | sizes="(max-width: 700px" 100vw, 33vw" | |
quality | integer | quality={80} | |
priority | boolean | priority={true} | |
placeholder | string | placeholder="blur" | |
style | object | style={{ objectFit : "contain" }} | |
onLoad | function | onLoad={event => done())} | |
onError | function | onError={event => fail())} | |
loading | string | loading="lazy" | |
blurDataUrl | string | blurDataURL="data:image/jpeg..." | |
overrideSrc | string | overrideSrc="/seo.png" |
- https://nextjs.org/docs/pages/api-reference/components/image