[React] 이미지를 불러오지 못할 때 onError 처리

이미지 주소에 문제가 있거나 확장자가 문제가 있거나 등등 문제가 발생할 경우 빈 이미지가 나올 경우가 있다.

이 때는 img 태그의 onError 속성을 이용하면 이미지가 출력되지 않을 경우를 핸들링 할 수 있다.

<img
    src={IMAGE_URL}
    alt={'이미지!'}
    onError= {(e) => {
        e.target.src = 'FALLBACK_IMAGE'
    }}
/>

타입스크립트를 사용할 경우 target 대신 currentTarget을 사용하면 된다.