Image 컴포넌트

생성 일시

Dec 25, 2024 06:57 AM

필수 prop : src, width, height(layout shift 방지), alt

최적화

Layout Shift 방지 : 로딩이 끝나면 레이아웃이 밀려가지 않게 함

Next.js는 Image를 placeholder화 해서 현상을 막음

lazy load : 유저가 보고 있는 것만 로딩
srcset : 압축률. 화면 크기별 다른 해상도 제공

⇒ 이 모든 최적화는 로컬이 아닌 외부 호스트의 이미지 링크에는 보안 상의 이유로 적용x

적용하려면 ? : next.config.mjs


const nextConfig = {
	images: {
		remotePatterns: {
			{
				hostname: "~"
			}
		}
	}
}

속성

fill 속성

== position:fill , 부모를 가득 채움
자동으로 position:absolute가 됨
부모를 relative로 지정하고, 부모 사이즈를 조절

quality 속성

해상도, 정수 값을 가짐(높을수록 화질 좋음)