Image fill 속성 사용 오류

다음 코드에서 버그를 찾으세요:

JAVASCRIPT

import Image from 'next/image';

export default function Banner() {
    return (
        <div>
            <Image
                src="/banner.jpg"
                alt="배너"
                fill
            />
        </div>
    );
}
// Image가 의도한 영역을 벗어나서 전체 화면을 차지함

답변

fill 속성 사용 시 부모 요소에 position: relative와 크기를 지정해야 함 Image 컴포넌트에 sizes 속성이 필수임 fill 속성과 함께 width, height도 지정해야 함 fill 대신 layout='fill'을 사용해야 함

로그인 후 제출하기