[vue.js] image 없을 경우 default 이미지 처리하는 방법 @error 사용하기

vue @error 호출하기

 

Vue.js 공부할 때 이미지 경로를 하드코딩하지 않고 변수로 연결했던 방법을 공유했었다.

https://ordinary-code.tistory.com/85

[Vue.js] 이미지 경로를 변수, data 값, URL로 이미지 연결하는 방법 (require이용)

 

오늘은 이미지 경로를 가져오다가 에러가 발생할 경우

default 이미지를 호출하는 코드를 공유해보려고한다.

 

😎img 태그 @error 활용하기

<img :src=data @error=methods/>

 

@error의 경우 원본 이미지가 깨지거나, 로드되지 않을 경우에는 호출된다.

대체 이미지를 넣을 메서드를 호출해서 default 이미지를 세팅할 수 있다.

 

샘플 코드

<template>
    <div>
        <img :src="image" @error="replaceImg" width="300px"/>
        <button @click="imageChange">Image Change</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                image: '',
            }
        },
        methods: {
            replaceImg(e) {
                e.target.src = require(`~/assets/images/errorImage.png`);
            },
            imageChange() {
                if(this.image === '') {
                    this.image = require(`~/assets/images/image.jpg`);
                }else {
                    this.image = '';
                }
            },
        },
    }
</script>

 

image라는 data를 :src에 연결해줘서 다이내믹하게 이미지를 변경할 수 있도록 세팅했다.

 

imageChange Methods를 호출할 경우 image 경로를  이미지 경로를 토글 시켰다.

한 번은 실제로 서버에 있는 이미지를 연결했고, 한번은 빈 경로를 return 했다.

 

@error에서는 replaceImg에서 준비된 default 이미지를 :src에 연동하도록 코드를 작성했다.

 

 

결과 화면

 

@error image 나타나기

image data가 빈칸일 경우 이미지가 경로가 없으니 자동으로

@error에서 default 이미지를 연결해서 보여주는 것을 볼 수 있다 :)