img 태그의 이미지 에러 처리

img 태그를 다음과 같이 사용할 때

<img
 alt="고양이"
 src="/images/cat1.png"
/>

img src에 있는 이미지가 존재하지 않거나 경로가 잘못 되었거나 해서 불러오지 못할 수 있다.

그럼 다음과 같이 alt의 텍스트로 표현해준다.

이렇게 나오면 미관상 별로이다.

그래서 이미지에 에러가 났을 때 디폴트로 보여줄 이미지를 설정해줄 수 있다.

onError 속성을 사용하면 되는데,

디폴트로 보여줄 이미지가 images 폴더 안의 image-none.png 파일이라면 다음과 같이 사용하면 된다.

const imageErrorHandler = (e) => {
	e.target.src = "/images/image-none.png"
}

<img
 alt="고양이"
 src="/images/cat1.png"
 onError={imageErrorHandler}
/>

위와 같이 사용하면 엑박 대신 imageErrorHandler에서 설정한 image-none.png 이미지를 보여준다.