HTML onerror 이벤트 속성이란?
HTML onerror 이벤트 속성은 HTML 문서에서 외부 파일(이미지, 스크립트 등)을 로드하는 과정에서 오류가 발생했을 때 자동으로 실행되는 이벤트 핸들러입니다. 예를 들어, 존재하지 않는 이미지 파일을 불러오려고 할 때 onerror 속성에 지정한 스크립트가 실행되어 대체 이미지를 표시하거나 사용자에게 알림을 보내는 등의 후속 처리를 수행할 수 있습니다.
onerror 속성은 주로 <img>, <script>, <link>처럼 외부 리소스를 불러오는 요소에서 활용됩니다.
문법(Syntax)
onerror 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onerror="script">Content</tagname>
예제
다음은 HTML onerror 이벤트 속성을 활용한 실전 예제입니다. 버튼을 클릭하면 잘못된 소스 경로를 가진 이미지 요소가 동적으로 생성되며, 이미지 로딩에 실패하는 순간 onerror 이벤트가 발생해 페이지 배경색이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>HTML onerror Event Attribute Demo</h1>
<button onclick="add()" class="btn">Add Nature Image</button>
<script>
function add() {
var imgEle = document.createElement('IMG');
imgEle.setAttribute("src", "nature.png");
imgEle.setAttribute("alt", "nature image");
imgEle.setAttribute("onerror", "errorFn()");
document.body.appendChild(imgEle);
}
function errorFn() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
document.body.style.color = "#fff";
}
</script>
</body>
</html>실행 결과
초기 화면은 아래와 같습니다.
"Add Nature Image" 버튼을 클릭하면 잘못된 src 속성과 onerror 이벤트 속성을 가진 이미지 요소가 생성되어 body 요소에 추가됩니다.
이미지 로딩에 실패하면 onerror 이벤트가 트리거되어 errorFn() 함수가 실행되고, 페이지 배경이 파란색 계열 그라데이션으로 바뀌는 것을 확인할 수 있습니다.
onerror 속성 활용 팁
- 대체 이미지 표시: 이미지 로딩 실패 시 기본 이미지나 플레이스홀더로 교체할 수 있습니다.
- 사용자 알림: 리소스 로딩 오류 발생 시 사용자에게 안내 메시지를 표시할 수 있습니다.
- 오류 로깅: 서버로 오류 정보를 전송해 프론트엔드 리소스 문제를 추적할 수 있습니다.