[HTML] img 태그 onerror 처리

img 태그에 사용한 이미지의 링크가 존재하지 않아 흉하게 보이는 경우

유용하게 사용할 수 있는 onerror 이벤트를 이용한 몇가지 처리 방법

 

1. 대체 이미지 노출 ( 예시. 네이버 로고로 대체 )

<img src="noimg.jpg" onerror="this.src='https://s.pstatic.net/static/www/img/uit/2019/sp_search.svg';"/>

2. 숨기기

<img src="noimg.jpg" onerror="this.style.display='none';"/>

3. DOM 자체를 삭제 ( IE에서는 removeNode() 함수를 사용해야 함 )

<img src="noimg.jpg" onerror="this.remove ? this.remove() : this.removeNode();"/>

4. 함수사용  * 대체 이미지도 없으면 무한 루프에 걸린다.

<img src="noimg.jpg" onerror="noImage()" />

<script type="text/javascript">
function noImage() {
   $("img").attr("src", "대체할 이미지.jpg");  
}
</script>