React img태그 onError 처리

이미지가 없거나 문제가 있을경우

이런 이미지가 나오는데 이전까지는 if문을 활용하여

ex)

const imgSrc = "https://www.test.com/img/testImg.png"
if(imgSrc){
	<img src={imgSrc}/>
} else {
	<img src={"대체URI"}/>
}

대충 이런식으로 했었는데 문제는 imgSrc에 URI값이 있지만 해당 이미지 파일이없을 경우 저런 이미지로 나오기때문에 이 방법은 잘못된 처리였다.

 

그래서 혹시나 했는데 img태그에 onerror라는 속성이 있었다..

 

공식문서

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

 

기본적인 사용법

대체 이미지 노출시키기
<img src="" onerror="this.src='대체이미지';"/>


스타일에 접근하기
<img src="" onerror="this.style.display='none';"/>


DOM삭제 시키기 ( IE에서는 removeNode() 함수를 사용 해야합니다.)
<img src="" onerror="this.remove ? this.remove() : this.removeNode();"/>

 

리액트에서 사용법

const imgOnError = (e) => {
	e.target.src = "대체 이미지";
}

<img 
    src={imgURI} 
    alt="test_img"
    onError={imgOnError}
/>