(Vue.js) 이미지URL이 없어 출력되지 않을 때 대체이미지를 쓰는 팁

이미지 데이터를 호출해 브라우저에 출력하고자 하는 이미지가 존재하지 않으면 이미지가 누락되거나 엑박이 표시된다. 그대로 놔두면 모양새가 나쁘기 때문에 해결해야한다.

 <img src="item.logo" onerror="this.src='<<URL>>'">

순수 html에서도 쓰이는 onerror 이벤트이다. 다만 vue.js파일에서 this.src 주소값을 함수로 빼기에는 너무나 까다로운 문법이다.

<template>
<div :key="index" v-for="(item, index) in list">
  <img :src="item.logo" @error="replaceByDefault">
</div> 
</template>

<script>
import img from '<<URL>>'

export default {
  methods: {
    replaceByDefault(e) {
      e.target.src = img
    }
  }
}
</script>

vue.js에서는 @error문법으로 methods에 넘기고 이벤트 타켓 벨류에 대입하면 대체 이미지를 활용할 수있다.

이렇게 보인다면 잘 출력된 것이다.