TIL - Next.js Image Component

이미지 로딩이 안된다.

import profileDefaultImg from '../../assets/profileDefaultImg.png';

const Profile = () => {    
        return (
          <div>
            <img src={profileDefaultImg} alt="user profile picture" />
          </div>
    )  
}

 

---

해결

import Image from 'next/image';

import profileDefaultImg from '../../assets/profileDefaultImg.png';

const Profile = () => {
	return (
    	<>
    		<Image src={profileDefaultImg} alt="user profile picture" />
        </>
    )
 }

Next.js의 Image 컴포넌트의 특징은 정적으로 임포트 된 이미지에 대해서는 width, height, blurDataURL 정보가 자동으로 생성

페이지가 100% 로드되지 않았을 때 이미지의 위치가 변하는 현상 즉, Cummulative Layout Shift(CLS) 같은 상황이 발생할 때 유용

공식문서참조
참고 블로그