[vuejs] 변수를 사용해 이미지 경로를 지정하는 법

코딩애플 강좌 듣는 도중 문제가 생겼다. 

강좌 내용을 응용하여 반복문을 이용한 div 내에 img 태그를 삽입하려는데, 이 때 변수를 이용해 다양한 이미지를  삽입하고 싶었다.

 

before 

처음 시도. :src를 입력한 뒤에 데이터 바인딩을 이용해 반복문의 키값을 넣어주려 했다. 결과는 실패. GET http://localhost:8080/img/assets/room0.jpg 404 (Not Found)라는 에러가 뜨며 모두 엑박이 떴다. 

<div v-for="(item,i) in products" :key="i">
  <img :src="'./assets/room'+{{i}}+'.jpg'" class="room-img"/>
  <h4>{{item}}</h4>
  <p>가격은?</p>
  <button @click="increase(i)">허위매물신고</button> <span>신고수 : {{report[i]}}</span>
</div>

after

이런저런 방법을 찾아본 결과, require를 이용하면 변수를 사용할 수 있다고 한다. 그래서 다음과 같이 작성해보았다.

<div v-for="(item,i) in products" :key="i">
  <img :src="require(`@/assets/room${i}.jpg`)" class="room-img"/>
  <h4>{{item}}</h4>
  <p>가격은?</p>
  <button @click="increase(i)">허위매물신고</button> <span>신고수 : {{report[i]}}</span>
</div>

결과는 성공!