img 태그 에러처리 방법

2019. 11. 1.

관련지식
html, img
쇼핑몰을 이용하다보면 img 태그에 사용한 이미지의 링크가 존재하지 않아 흉하게 보이는 경우를 본적이 있을것입니다.
요즘같이 외부 이미지 호스팅 서비스를 사용하는 경우가 많고, 쇼핑몰처럼 주요 컨텐츠가 이미지인 사이트에선 이미지의 링크 관리가 매우 중요할것 같습니다. onerror 이벤트를 이용한 몇가지 처리 방법을 적어보겠습니다.

대체 이미지 보여주기

이미지가 링크가 없어졌을때 “이미지가 없습니다” 라는 대체 이미지를 보여주고 싶다면, onerror 에서 src 속성을 대체 url로 바꿔주도록 하면 됩니다. 아래는 네이버 로고로 대체하도록 되어있습니다.

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

숨기기

대체 이미지를 보여주는것이 적당하지 않다고 생각될때는 그냥 숨길수도 있습니다. 이미지가 깨진 상태로 보이는것보다 훨신 깔끔하겠죠.

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

이미지를 숨기는것이 아니라 DOM 자체를 삭제할수도 있습니다. IE에서는 removeNode() 함수를 사용해야 합니다.

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

이미지 링크 관리하기

이미지 컨텐츠가 엄청나게 많을 경우 모든 이미지를 매일 직접 확인하는것은 어려운 일입니다. 그러나 쇼핑몰에선 매우 중요한 상황이겠죠. 아래처럼 이미지 링크에 문제가 있을 경우 서버로 해당 링크를 전송시키면 문제가 있는 링크를 관리할 수 있습니다.
error.jsp 에서는 response header 의 referer 값으로 전달 받은 url(문제가 있는 이미지 url)이 어디서 사용되는 이미지인지 쉽게 알아낼수 있습니다.

<img src="noimg.jpg" onerror="sendError(this.src);"/>
<script>
function sendError(url) {
  $.ajax({
    url : 'error.jsp', 
    data : 'url=' + encodeURIComponent(url)
  });
}
</script>

최종샘플

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
div { border:1px solid black; width:200px; height:300px; float:left; }
</style>
</head>
<body>
<div>
  <img src="noimg.jpg"/>
</div>
<div>
  <img src="noimg.jpg" onerror="this.src='https://s.pstatic.net/static/www/img/uit/2019/sp_search.svg';"/>
</div>
<div>
  <img src="noimg.jpg" onerror="this.style.display='none';"/>
</div>
<div>
  <img src="noimg.jpg" onerror="this.remove ? this.remove() : this.removeNode();"/>
</div>
<div>
  <img src="noimg.jpg" onerror="sendError(this.src);"/>
</div>
<script>
function sendError(url) {
  $.ajax({
    url : 'error.jsp', 
    data : 'url=' + encodeURIComponent(url)
  });
}
</script>
</body>
</html>

저작자표시 비영리 변경금지

'쓸데없는 코딩하기' 카테고리의 다른 글

인스타그램 어플의 쿠키값을 알아낼수 있을까?(How to get instagram app cookie?) (5)	2019.11.12
Compute Engine 에서 VM 인스턴스 기동시 스크립트 실행하기 (0)	2019.11.08
You must sign up for private packages 오류 발생시 (0)	2019.10.16
[css] 텍스트 글자 생략 … 적용하기 (1)	2019.10.11
crontab 스케쥴 자동으로 추가/삭제 (0)	2019.10.08

쓸데없는 코딩하기