[Vue] img 에러 처리방식 정리

일반 html 

<img src="/img/..." onerror="imgError(this)"/>


// javascript
function imgError(imgTag){
imgTag.onerror="";
    imgTag.src="/img/noname.jpg";
    return true;
}

 

 

Vue 

1. <img> Tag

  <img
    v-if="item.imgSrc != null"
    :src="item.imgSrc"
    :alt="item.imgAlt"
    @error="$event.target.src=require('@/assets/img/no-Img.jpg')"
  />
  <img
    v-else
    :src="require('@/assets/img/no-Img.jpg')"
    :alt="item.imgAlt"
  />

 @error="$event.target.src=require('@/assets/img/no-Img.jpg')"

 

 

2. CSS background-image

<div 
   :style="{
          'background-image': 'url(' + item.imgSrc + '),url('+require(`@/assets/img/no-Img.jpg`) +')',
        }"
>
</div>

background-image:url(이미지),url(에러이미지) 로 설정할 수있다.