[HTML] img src 없을 때 대체이미지 출력방법

#HTML #nosrc #noimg #대체이미지 #onerror.this.src

 

 

 

개발 상에서 이미지코드를 가져오는데 가끔 이미지를 불러오지 못할 때 레이아웃 자체가 망가지는 경우가 있는데

이 때 사용할 수 있는게 onerror코드를 사용할 수 있다.

 

src속성이 비었거나 null일 때, 이미지 데이터가 손상되었을 때 등

이미지를 불러와 출력할 수 없을 때 에러이미지를 출력할 수 있다.

 

대체이미지만 불러올 수 있는게아니라 css를 따로 조정할 수도 있는데 주의할 점은 

src 이미지도, onerror이미지도 없을 경우 무한루프에 걸린다고 합니다.

 

 

1. 대체이미지 출력

<img src="/no-img/no-img/img.jpg" alt="이미지" onerror="this.src="/html/img/no-img.png">

 

2. css 설정

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