[TIL] 0614 | 서버에서 받아오는 이미지가 404 경로일 때 처리해주기

🤔 이슈가 생긴 이유

기존에 이미지가 없을 경우 DefaultUserImg 가 대신 처리해주도록 설정해주었으나

<Profile>
	<img
		src={writerProfileImage || DefaultUserImg}
    alt="유저 기본 프로필 이미지"
  />
</Profile>

이미지를 받아오면서도 이미지 경로가 404일 때를 처리하지 못하여 이미지가 깨져나오는 이슈가 있었음.

서버에서 라이브(실시간)로 이미지 정보를 받아오는 것이 아니라 작성된 순간 정적으로 데이터베이스에 저장이 되어 가져오기 때문에 나중에 사용자가 프로필 이미지를 수정할 경우 경로가 달라져 404로 처리가 되어 에러가 발생하게 된 것이다.

✔︎ onError 이벤트 설정해주기

깨진 이미지 경로일 경우 error가 발생했을 시 디폴트 이미지를 설정해줄 수 있는 onError 이벤트를 설정해주기로 했다.

사용 예시

const handleImgError = (e) => {
	e.target.src = defaultProfile;
}

...
<img 
    src="이미지 url주소"
    alt="profile_img"
    onError={handleImgError}
/>

적용

import UserDefaultImage from '@assets/profile/user-default-img.svg';

const handleImgError = (e) => {
    e.currentTarget.src = UserDefaultImage;
  };
...

<UserProfileImage
	src={writer.profileImage || UserDefaultImage}
	alt="유저 기본 프로필 이미지"
	onError={handleImgError}
/>

TypeError 가 발생한다면,

const handleImgError = (e // ~~ 타입에러 발생~~) => {
    e.target.src = UserDefaultImage;
};

React.SyntheticEvent<HTMLImageElement, Event> 로 이벤트 타입을 지정하면 된다.

const handleImgError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
    e.currentTarget.src = UserDefaultImage;
  };

⚡️ 참조

https://www.kindacode.com/article/react-typescript-image-onload-onerror-events/
https://webruden.tistory.com/346
https://zxchsr.tistory.com/16
https://gaemi606.tistory.com/entry/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-onError%EC%B2%98%EB%A6%AC-img-onError