HTML 이미지 태그를 사용하여 이미지를 로드할 때
이미지 로드 오류 발생 시 onError 속성을 사용하여 대체이미지를 설정할 수 있다.
1. onError 속성 사용
아래 작성한 이미지 태그를 보면 dog.jpg 이미지를 로드하고,
로드에 실패했을 때 dog_2.jpg 이미지를 로드하도록 onError 속성을 추가했다.
<img src="dog.jpg" onError="this.src = dog_2.jpg;"/>
그런데 만약 dog_2.jpg 이미지도 로드가 되지 않는다면 어떻게 될까?
그런 상황이 발생한다면 onError에서의 대체 이미지도 로드 오류로 판단해서
다시 onError를 호출하게 되면서 계속해서 onError를 호출하는 무한루프에 빠지게 된다.
2. onError 초기화 - 무한루프 방지
이 상황을 해결하기 위해 onError에서 다음과 같이 onError값을 비워주도록 한다.
<img src="dog.jpg" onError="this.onerror = null; this.src = dog_2.jpg;"/>
처음 dog.jpg 이미지를 로드하다가 실패하면 onError를 실행하고,
onError 실행하면 onError를 비워주고 대체 이미지 경로를 세팅한다.
대체 이미지 로드도 실패하더라도 무한으로 onError를 호출하는 루프에 빠지지 않게 된다.
또는 해당 이미지가 노출되지 않도록 하는 방법도 있다.
<img src="dog.jpg" onError="this.style.display = 'none';"/>
3. onError에서 함수 사용
오류가 발생했을 때 더 다양하고 많은 작업들을 하기 위해 함수를 만들어 사용해도 된다.
<img src="dog.jpg" onError="onErrorFn(this);"/>
function onErrorFn (_this) {
...
}