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

Vue 이미지 경로 변수처리 하기

vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서

해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다.

혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 이용하는 방법이다.

 

 

vue 이미지 변수로 연결하기

<img :src="require(`@assets/images/${변수명}.png`)"/>

샘플 코드는 아래와 같다.

이미지를 data에 선언한 변수를 연결한 뒤,

이미지를 클릭하면 if문 분기를 이용해서 이미지가 변경되는 코드이다.

<template>
    <div style="padding:50px; position:relative;">
        <img :src="require(`@/assets/images/${imgName}.png`)"
             @click="changeImg"/>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgName: 'soup'
            }
        },
        methods: {
            changeImg(){
                if(this.imgName === 'soup') {
                    this.imgName = 'breakfast';
                }else {
                    this.imgName = 'soup';
                }
            }
        }
    }
</script>

 

실제 화면

해당 소스를 실제로 실행해보면 imgName에 들어있는. png 파일을 연결해준다.

또한 이미지를 클릭하면 imgName Data가 변경되면서 이미지가 if문 분기에 따라 변경되게 된다.

 

vue img 클릭시 변경되는 결과화면

 

 

URL 이미지에 연결

마찬가지로 URL을 연결하는 것도 가능하다.

그리고 그 URL 안에도 변수 처리 또한 가능하다.

<img :src='`URL 주소 입력${변수명}`' />

<template>
    <div style="padding:50px; position:relative;">
        <img :src='`https://image.flaticon.com/icons/png/512/4825/${imgName}.png`'
             @click="changeImg"/>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgName: '4825430'
            }
        },
        methods: {
            changeImg(){
                if(this.imgName === '4825430') {
                    this.imgName = '4825330';
                }else {
                    this.imgName = '4825430';
                }
            }
        }
    }
</script>

 

 

 

실제 화면

마찬가지로 URL에 공유된 이미지가 뜨기 시작하고,

클릭 시 data 변수의 값을 가져와서 이미지가 변경된다.

실제 URL 연결화면

 

 

이미지를 이용한 사이트는 아래입니다 :)

무료 이미지 공유 감사합니다!

https://www.flaticon.com/packs/brunch-19