[코드지갑] 이미지를 찾을 수 없습니다

간혹 이미지의 링크가 잘못되었거나 해당 경로가 바뀌어서 엑박이 뜨는 경우가 종종 있다.

이런 경우 img의 onerror 이벤트를 이용해 대체 이미지를 노출 할 수 있다.

• img태그에 onError에 handleImgError라는 함수를 바인딩 처리 해준다.

<img
  src={dogImg}
  style=
  id='onError'
  alt='random dog'
  // react에서는 onError를 사용한다.
  onError={handleImgError}
/>

그리고 아래와 같이 (주)이미지가 없을 때 대체 이미지를 설정해주면 된다.

const handleImgError = (e: any) => {
  e.target.src = 'images/no-pictures.png';
};

아래 예시 페이지에는 3초 후에 이미지를 불러오도록 설정을 해봤다.

그랬더니 3초동안은 대체 이미지, 그리고 3초 후에 통신을 통해 받아온 이미지를 가져오는 것을 볼 수 있었다.

예시 보러가기

주의 사항

대체 이미지까지 만약에 없는 경우에는 무한루프로 콘솔에 경고 메시지가 나온다…