[React] 이미지 에러 시 대체 이미지 설정

서버에서 상품 데이터를 가져와서 화면에 보여주다가
이미지 정보를 제대로 가져오지 못해 엑박이 뜨는 경우가 있을 수 있다.

 

그럴 때 onError를 사용하여 기본 이미지를 사용하여 대체할 수 있다.

// 대체 이미지 import
import replace from '../assets/replace.png';

// error 발생 시 대체 이미지로 이미지 설정
const onErrorImg = (e) => {
  e.target.src = replace
}

// img 태그에 onError 설정
<img src={`https://codingapple1.github.io/shop/shoes${shoe.id + 1}.jpg`} width="80%" alt="shoes-img" onError={onErrorImg}/>

원래는 이미지 엑박이 떴었는데
기본 이미지로 잘 대체된 것을 볼 수 있다.