img 태그 404 Error시에 대체 이미지 띄우기 (onError)

소개

• img 태그는 src라는 attribute에 이미지의 주소를 입력함으로써 사진을 보여줄 수 있는 태그입니다.
• src에 입력한 주소가 유효하지 않을 경우, 엑스박스 흔히 엑박이라고 불리우는 것이 뜨게 됩니다.
• 이는 미관상 좋지 않기에 적절한 이미지로(아래 이미지와 같은) 대체 해주면 보다 친절한 사이트가 될 수 있겠지요.
• onError기능을 이용해서 대체 이미지를 띄우는 방법을 html, js로 나눠서 소개하겠습니다.

 

코드예시

- html

<img id="태그_아이디" scr="이미지_주소" onError="this.src='대체_이미지_주소';">

- js

var img_elm = document.getElementById("태그_아이디");
img_elm.onerror = function() {
  this.scr = "대체_이미지_주소";
}