[에러 일지] img 태그 src 속성에 동적 바인딩하기

❗️ img 태그 src 속성에 동적 바인딩하기

<template>
  <div class="products" v-for="(product, i) in products" :key="product.id">
    <img :src="`./assets/room${i}`" class="room-image" />
    <h4 @click="setModalOpen(product.id)">{{ product.title }}</h4>
    <p>{{ product.price }}만원</p>
  </div>
</template>

v-for로 렌더링되고 있는 각각의 리스트에 assets 폴더에 있는 사진을 함께 렌더링 하고자 했다.

그래서 이미지 파일명을 room0, room1, room2와 같이 products의 인덱스와 동일한 숫자를 붙여 작명하고, src 속성에서 변수를 사용하려 했는데 생각대로 작동하지 않았다 . . 🥺

✨ 해결

<template>
  <img :src="product.image" class="room-image" />
</template>

<script>
  export default {
    data() {
      return {
        products: [
          { ..., img: require('./assets/room0.jpg') }
        ]
      }
    }
  }
</script>

products의 각 리스트에 img라는 프로퍼티를 추가하고, require로 이미지를 불러온 뒤에 :src에 바인딩해주면 각 리스트마다 사진을 함께 렌더링할 수 있다!