[HTML] img 태그 이미지 로드 실패시 대체(디폴트) 이미지

[HTML] img 태그 이미지 로드 실패시 대체(디폴트) 이미지

img 태그로 src 이미지 로드에 실패한다면 엑스 박스가 나오는데 따로 처리해주지 않는 이상 alt 속성에 넣은 텍스트를 보여준다. 이미지 로드 실패에 대해 대체 이미지를 적용한다거나 이미지를 숨기는 방법을 사용할 수 있다. 이 글에서 2가지 방법에 대해 짧게 정리해보려고 한다.

 

 

 

대체 이미지

onerror 속성에 대체이미지 경로를 아래와 같이 넣어주면 된다.

<img src="이미지.확장자" onerror="this.src='대체이미지.확장자'">

<!-- example -->
<img src="origin.png" onerror="this.src='errorImg.jpg'">

 

 

 

 

이미지 숨기기

onerror 속성에 아래와 같이 this.style.display='none'으로 설정을 하면 이미지 로드 실패시 이미지를 숨긴다.

<img src="이미지.확장자" onerror="this.style.display='none';">

<!-- example -->
<img src="origin.png" onerror="this.style.display='none';">

 

 

 

 

 

 

 

 

 

https://pingfanzhilu.tistory.com/entry/HTML-img-%ED%83%9C%EA%B7%B8-%EB%8C%80%EC%B2%B4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%85%B8%EC%B6%9C-%EC%86%8D%EC%84%B1-onerror-%EB%AC%B8%EB%B2%95-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95

[HTML] - img 태그 오류 대체 이미지 노출 속성 onerror 문법 및 사용법

https://velog.io/@nooroong/html-img-%EB%A1%9C%EB%93%9C-%EC%8B%A4%ED%8C%A8-%EC%8B%9C-%EB%94%94%ED%8F%B4%ED%8A%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%A0%81%EC%9A%A9

html img 로드 실패 시 디폴트 이미지 적용