Vue3 이미지 태그에 경로를 동적으로 불러올 때 엑박 / v-bind 이용해서 처리하기

유튜버 코딩애플 님의 Vue 강의를 듣다가 이미지 경로를 변수로 설정해 불러오니 이미지에 엑박이 떴다. 

 

나의 코드

<template>
  <div class="menu">
    <a v-for="(menu, key) in menus" :key="key">{{menu}}</a>
  </div>

  <div v-for="(product, key) in products" :key="key">
    <img class="room-img" :src="product.imgSrc" alt="image" />
    <h4>{{product.name}}</h4>
    <p>{{product.price}}</p>
    <button @click="reportFakeProduct(key)">허위매물신고</button> <span>신고수 : {{product.fakeReport}}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      menus: ['Home', 'Shop', 'About'],
      products : [
        {name: '역삼동 원룸', price: '70만원', fakeReport: 0, imgSrc: ('./assets/images/room0.jpg')},
        {name: '천호동 원룸', price: '50만원', fakeReport: 0, imgSrc: ('./assets/images/room1.jpg')},
        {name: '마포구 원룸', price: '60만원', fakeReport: 0, imgSrc: ('./assets/images/room2.jpg')},
      ]
    }
  },
  methods: {
    reportFakeProduct(num) {
      this.products[num].fakeReport = this.products[num].fakeReport + 1;
    }
  },  
}
</script>

오류 화면

 

 

이를 해결하기 위해 v-bind 속성을 구글링했다. 이미지 경로에 require를 부여해줘야 한다고 했다.

 

수정 코드

<template>
  <div class="menu">
    <a v-for="(menu, key) in menus" :key="key">{{menu}}</a>
  </div>

  <div v-for="(product, key) in products" :key="key">
    <img class="room-img" :src="product.imgSrc" alt="image" />
    <h4>{{product.name}}</h4>
    <p>{{product.price}}</p>
    <button @click="reportFakeProduct(key)">허위매물신고</button> <span>신고수 : {{product.fakeReport}}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      menus: ['Home', 'Shop', 'About'],
      products : [
        {name: '역삼동 원룸', price: '70만원', fakeReport: 0, imgSrc: require('./assets/images/room0.jpg')},
        {name: '천호동 원룸', price: '50만원', fakeReport: 0, imgSrc: require('./assets/images/room1.jpg')},
        {name: '마포구 원룸', price: '60만원', fakeReport: 0, imgSrc: require('./assets/images/room2.jpg')},
      ]
    }
  },
  methods: {
    reportFakeProduct(num) {
      this.products[num].fakeReport = this.products[num].fakeReport + 1;
    }
  },  
}
</script>

이미지가 잘 출력된다.

 

왜 require 를 부여해줘야 할까?

require는 import와 비슷하게 파일 외부의 데이터를 가져올 때 사용하는 JavaScript 내장함수다. HTML에서 바로 이미지 경로를 불러오는 것과 달리 JavaScript에서 이미지 경로를 문자열 형태로 그대로 입력하면 String 그 자체로 인식이 되기 때문에 이미지 경로를 JavaScript 파일에 심기 위해 require가 필요한 것이다. 

 

오늘의 에러 기록 끝!

 

 

@출처

코딩애플님 강의 꾸르잼!

https://www.youtube.com/watch?v=-tVaahsXpwk