[TIL] 20230821 - img 태그 src 속성값 타입 오류

'string | null' 형식은 'string | undefined' 형식에 할당할 수 없습니다. 'null' 형식은 'string | undefined' 형식에 할당할 수 없습니다.ts(2322)index.d.ts(2276, 9): 필요한 형식은 여기에서 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>' 형식에 선언된 'src' 속성에서 가져옵니다.
(property) React.ImgHTMLAttributes<HTMLImageElement>.src?: string | undefined
문제 보기 (<Alt>+F8)빠른 수정을 사용할 수 없음

 

   <img src={thisUser.profile_img} alt="" />

 

import한 이미지가 아닌 이미지 주소를 넣으려니 타입 오류가 발생했다.

유형 할당(type assignment) 에러이다.

 

이미지 속성의 타입 정보들을 보니

    interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
        alt?: string | undefined;
        crossOrigin?: CrossOrigin;
        decoding?: "async" | "auto" | "sync" | undefined;
        height?: number | string | undefined;
        loading?: "eager" | "lazy" | undefined;
        referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
        sizes?: string | undefined;
        src?: string | undefined;
        srcSet?: string | undefined;
        useMap?: string | undefined;
        width?: number | string | undefined;
    }

이미지 src 속성의 타입은 string 또는 undefined 이다.

 

 

thisUser.profile_img가 string | null 형식 일경우

 

   <img src={thisUser.profile_img || ''} alt="" />

 

thisUser.profile_img 값이 string | undefined 형식이라면

 

   <img src={thisUser.profile_img ?? ''} alt="" />

 

 

null이나 undefined가 아닐경우 thisUser.profile_img 이미지 주소를 사용한다!

아주 간단히 오류는 해결되었다.