v-for을 통한 이미지주소 처리

[김김김]

v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법) 

강의를 보고 나서 

이미지 src도 같은 형태의 이름이면 똑같이 사용할수있지않을까? 생각해서

v-for문으로 이미지 경로 처리도 해보았습니다.

  <div v-for="(a, i) in products" :key="a">
   <span style="color: #ff0000;"> <img :src="'./assets/room' + i + '.jpg'"</span /> class="room-img" />
    <h4 @click="modalPage = true">{{ a }}</h4>
    <p>60 만원</p>
    <button @click="singosu[i]++">허위매물 신고</button>
    <span> 신고수 : {{ singosu[i] }}</span>
  </div>

와 같은 형태로 만들어 보았지만 이미지는 따로 나오지는 않았습니다.
저 형태에서 바인딩을 안하고 문자로 주소 값을 넣어주면 그때는 나옵니다.
브라우저 요소의 src의 경로는 문자로 같은 형식으로 나옵니다.

처리하는 방식이 달라서 그런 걸 까요? 궁금합니다.

 

[codingapple]

동적으로 이미지 주소 넣을 땐 :src="require('이미지경로')" 이렇게 씁시다

[글쓴이]

글