이미지 파일이 없는 경우 대체 이미지 보여지도록 설정하는 방법

안녕하세요. 혀코입니다.

웹사이트에 예전에 올린 이미지 파일이 삭제되는 경우, 이미지가 깨져서 웹사이트에 표시되는 경우가 종종 있습니다.

그래서 이번 시간에는 이미지 파일이 없는 경우에 대체 이미지를 보여지도록 설정하는 방법에 대해서 알아보겠습니다.

 

이미지 태그에 이미지 파일이 없는 경우의 소스코드입니다.

<img
    width="480"
    alt="fallback image for broken image tag"
    src="broken-image.jpg"
/>

 

프리뷰를 보면 다음과 같이 이미지가 깨져서 표시가 되는 것을 확인할 수 있습니다.

여기서 대체 이미지를 사용하려면 onerror attribute를 사용해서 대체 이미지를 대신 표시할 수 있습니다.

<img
	width="480"
	alt="fallback image for broken image tag"
	src="broken-image.jpg"
	onerror="this.src='fallback.png'; this.setAttribute('alt','');"
/>

이미지가 깨진 경우, onerror 가 실행되며, onerror의 javascript 내용을 보면, 이미지 소스를 디폴트 이미지인 fallback.png로 변경하고 이 이미지의 alt attribute의 값을 지우는 것을 확인하실 수 있습니다.

아래 CSS 코드는 추가 옵션입니다. 

<style>
img {
	background-color: hsl(0, 0%, 80%);
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
</style>

디폴트 이미지가 투명 백그라운드에 글자만 포함된 PNG 파일이라 배경색을 지정해도 괜찮기 때문에 CSS에서 배경을 지정했습니다. 

HTML의 <img> 태그에서 가로값을 480px으로 설정해 뒀기때문에 css에서도 480px 으로 보여지게 하기 위해서 max-width 값을 100%로 지정했으며, height을 auto 로 지정해서 aspect-ratio 16/9 에 따라 height 값이 변할 수 있도록 설정했습니다. 

참고로, aspect-ratio 값이 21:9 가 되면 결과는 다음과 같이 나타나게 됩니다.

 

이렇게 이미지 파일이 없는 경우 대체 이미지가 보여지도록 설정하는 방법에 대해서 알아봤습니다.

해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)