Javascript img src에 이미지가 없어서 엑박뜰때 이미지 안보이게 하기

<img>태그에서 src경로에 이미지가 없어서 이미지가 보이지 않고 엑박이 뜰때 보이지 않게 하는 방법

img태그에 onerror에 display을 none으로 처리하여 안보이게 한다.

이렇게 사용할 경우 icon.png이미지를 찾고 해당 이미지가 없으면 onerror처리를 하기 때문에

화면에 잠시 엑박 이미지가 보이고 사라지는 현상이 발생한다.

 

<div>
	<img src="/images/icon.png" alt="이미지" />
</div>

<div>
	<img src="/images/icon.png" alt="이미지" onerror="this.style.display='none'" />
</div>

 

 

이미지 대체하기

onerror에 this.src로 대체할 이미지 경로를 입력한다.

 

<div>
	<img src="/images/icon.png" alt="이미지" onerror="this.src='images/icon.png'" />
</div>