[css] 이미지 에러 처리하기, 디폴트 이미지 처리

이미지 에러 처리를 간단하게 하는 방법

 

background image 백그라운드 이미지를 사용하는 경우 url을 여러번 넣어서 fallback을 처리할 수 있다.

background-image: url('적용할 이미지 주소'), url('fallback으로 적용할 이미지 주소');

배경이 투명이면 그대로 뒤에 비쳐지게 된다. 이럴때는 background image 보다는 img로 마크업하자.

 

<img src={...} alt={...} onError={handleError} />

const handleError = (e) => {
  e.target.src = '적용할 이미지 주소'
}