[ NextJS ] Image is missing required "src" property: 에러에 관하여

Image is missing required "src" property: 에러에 관한 내용입니다.

이미지를 넣는 과정에서 이런 에러가 나오는 경우가 종종 있습니다.

Image src부분이나 alt부분에 제대로된 값이 들어가기전에 한번 실행되기 때문인것으로 생각됩니다.

 

import ...

const App = ({ user }, { user: UserProps }) => {
    
    return (
        <Image width={9999} height={9999} src={user.profile} alt={userWrap.user.nickname + "님의 배경 프로필"} />
    );
}

위와 같은 내용이 있을 때, user에 제대로된 내용이 들어오기전에 undefined가 들어가서 실행을 한번 해줘서 일어나는 현상이라 생각됩니다.

 

해결방법

import ...

const App = ({ user }, { user: UserProps }) => {
    
    return (
        { user.profile && <Image width={9999} height={9999} src={user.profile} alt={userWrap.user.nickname + "님의 배경 프로필"} /> }
    );
}

다른 방법도 있을지 모르지만, "user.profile에 내용이 담기면 실행해라" 라고 일단은 설정을 해두었습니다.