이미지 로딩 에러에 대비하는 대체 이미지

<img> 태그의 src에 넣은 이미지의 로딩에 실패할 때가 있다. MDN에 따르면 아래의 경우들이다.

• src 속성이 비었거나 null임.
• src의 URL이 현재 사용자가 보는 페이지의 URL과 같음.
• 지정한 이미지가 손상돼 불러올 수 없음.
• 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고,
  <img> 요소의 속성에도 크기를 지정하지 않음.
• 사용자 에이전트가 지원하지 않는 이미지 형식임.

이럴 때, 브라우저는 우리가 alt 속성에 넣어둔 대체 텍스트를 보여주지만,

onerror 이벤트 핸들러를 이용해 대체 이미지를 보여주는 방법도 있다.

HTML의 정적 이미지에 적용

<img 
   src="이미지 경로" 
   alt="대체 텍스트" 
   onerror="this.onerror=null; this.src='대체 이미지 경로'"
>

this.onerror=null을 하는 이유?

이미지 로딩 에러에 대처하기 위한 대체 이미지까지 로딩에 실패할 경우,

로딩 에러 -> error 이벤트 fire -> this(img)의 src에 대체 이미지 경로 넣기 -> 대체 이미지 로딩 에러 -> error 이벤트 fire -> ...반복

이처럼 무한 로딩으로 인해 아래와 같은 무한 깜빡임 현상이 생길 수 있으므로, this.onerror=null을 해주어야 한다.

JS로 추가하는 동적 이미지에 적용

// 일반 함수
const img = document.createElement('img');
img.src = '이미지 경로';
img.onerror = function () => {
    this.onerror = null;
    this.src = '대체 이미지 경로';
};

화살표 함수를 사용한다면 this가 window(엄격 모드에선 undefined)이므로 event 객체에서 target을 뽑아와서 사용한다.

// 화살표 함수
const img = document.createElement('img');
img.src = '이미지 경로';
img.onerror = ({ target }) => {
    target.onerror = null;
    target.src = '대체 이미지 경로';
};