[Vue.js 2] 삼항연산자로 이미지 바꾸기

소켓에서 받은 데이터에서 특정 조건이 만족되면 아래 이미지와 같이 회색에서 파란색이 되도록 만들고 싶었다.

1. App.vue

<template>
    <div>
        <div>
            <img id="image" src="@/assets/images/off.png">
        </div>
    </div>
</template>
<script>
export default {
    data: function () {
        return { ... 생략 ... }
    },
    methods: {
        ... 생략 ...
        setImage: function() {
        	this.$socket.setImage(document.getElementById('image'))
        },
        ... 생략 ...
    },
</script>

 

2. socket 모듈

... 생략 ...

const setImage = (img) => {
	this.imgMark = img;
}

... 생략 ...

const changeData = (data) => {
	this.imgMark.src = data ?
            require("@/assets/images/on.png") : require("@/assets/images/off.png");
}

... 생략 ...

 

 

처음엔

"../이미지 경로"

이렇게 썼더니 아래 그림처럼 떠서 경로 잘못쓴줄 알고 당황했다.