[Thymeleaf] img 태그 onerror 스크립트에서 관리하기

• 1. img 태그 작성

• 2. 스크립트 작성

CDN 서버를 통해 이미지를 가져오던 중 해당 서버에 요청한 이미지가 없을 경우 기본 이미지를 지정하기 위해 onerror 속성을 사용합니다. 이번 포스팅에서는 onerror 이벤트를 javascript 에서 핸들링 하는 방법에 대해 가볍게 작성하였습니다

1. img 태그 작성

<img 
  th:src="@{${cdnUrl} + ${baseModel.cd} + '.jpg'}"
  th:baseCd="${baseModel.cd}"
  th:onerror="imgLoadError(this.getAttribute('baseCd'))"
  alt="기본 이미지" class="baseImg"
  th:id="'baseImg_'+${baseModel.cd}" />

• th:onerror 에 함수를 지정하고 파라미터 값으로 속성(th:baseCd)을 넘깁니다.

 

2. 스크립트 작성

<script th:inline="javascript">
  function imgLoadError(baseCd){
    console.log(baseCd);
    $('#baseImg_'+baseCd).attr('src', '/images/base.jpg');
  }
</script>

• 함수 내부에서 추가적인 작업을 진행하고 img 의 src를 지정할 수 있습니다.

감사합니다.