html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5)

html img 태그 src 속성에 깨진 이미지 경로를 넣으면 아래와 같이 아무 이미지도 안나오게 됩니다.

<img src="이미지가 깨진 경로 url" />

html img의 src 속성에 깨진 이미지 경로를 넣을 경우

하지만 이때 깨진 이미지 경로일 경우 디폴트 이미지로 설정하는 방법이 있습니다. onerror 이벤트를 활용하면 됩니다. img 태그 디폴트 이미지 설정 예시는 아래와 같습니다.

// onerror 사용 예시
<img
  src="https://www.naver.com/aa/bb/cc.png"
  onerror="this.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTONt-7A-flC_xyz_cncZqHpvCNfXTBjl6xQ&usqp=CAU'"
/>

// or
// 이벤트 핸들러
<img src="이미지가 깨진 경로 url" onerror="imageLoadError" />

onerror에서 this.src를 디폴트 이미지로 변경해서 처리하는 예시

vue에서는 @error를 사용해서 처리하면 됩니다.

// vue에서 사용하는 방법
<img :src="item.logo" @error="imageError" />