[html] img태그 에러 처리 방법

[html] img태그 default 이미지 적용하기

이미지 태그 error처리

 

img 태그의 src 속성에 url이 존재하지 않거나 이상이 있는 경우, 빈 이미지가 노출 된다.

그 결과 ui가 ugly하게 보인다. 이럴 때 onError 이벤트를 사용할 경우 대처가 가능하다.

 

사용법 및 주의 사항

onError 이벤트는 url이 존재하지 않을 경우만 동작한다.

url이 falsy value 일 경우, onError 이벤트는 동작하지 않는다. (ex: null, undefined, ‘’)

 

const defaultImagePath = 'https://via.placeholder.com/300/09f.png';
// sourceUrl이 falsy value 일 경우 동작하지 않기 때문에
// defaultThumbImagePath로 초기화 필요
const sourceUrl = sourceUrl || defaultImagePath;

const handleImgError = (e: SyntheticEvent<HTMLImageElement>) => {
    e.currentTarget.src = defaultThumbImagePath;
};

return (
	<img src={sourceUrl} onError={handleImgError} />
);

1. sourceUrl이 falsy value 일때를 대비해서 defaultImagePath로 초기화
2. img url이 없거나 잘못 되었을 경우 onError 이벤트 발생