[html] 이미지가 없을 경우 alt메세지 대신에 대체 이미지 출력하기

이미지를 불러올 수 없을 때 alt속성으로 문자를 출력할 수 있지만, 문자 대신 다른 이미지를 출력하는 것이 가능하다.

<img src="원래 이미지 주소.jpg" onerror=this.src="대체 이미지 주소.jpg">

 

 

위와 같이 onerror 속성을 이용하면 원래 src 이미지를 불러오지 못했을 때 대체 이미지를 설정할 수 있다.

이 때 onerror이미지마저 불러오지 못한다면 무한 루프에 빠질 수 있으므로, 이를 방지하려면 아래처럼 onerror를 null로 지정하는 방식을 이용해야한다.

<img src="원래 이미지 주소.jpg" onerror="this.onerror=null; this.src='대체 이미지 주소';">

 

 

onerror일 경우(원래 이미지를 불러오지 못했을 경우) 이미지를 null로 설정하고, src로 대체 이미지 주소를 불러온다.

이를 통해 onerror일 경우에 대체 이미지를 한 번만 불러오게 되어 무한루프를 방지할 수 있다.

크롬의 경우 onerror는 한 번만 불러오도록 브라우저 자체 설정되어 있으므로 괜찮지만, 다른 브라우저를 위해 이 방식을 이용하는 것이 좋다.