[Vue.js] img 태그 이미지 주소 데이터 바인딩

export orderInfo = [
{
    paymentIdx: "O16086544",
    goodsName:
      "1번 상품명",
    goodsIdx: 1234567,
    goodsimg:
      "https://cdn.pixabay.com/photo/2015/02/02/11/08/office-620817_960_720.jpg",
      
...(생략)
}
]

 

이런 형태의 배열 데이터가 있다. 여기의 goodsimg에 문자열 형태로 있는 이미지 주소를 <img> 태그의 src 부분에 넣어주려고 한다. 

 

...(생략)
<tr class="tr-main">
	<td class="order-list-img">
    	<img src="orderInfo.goodsimg" alt />
    </td>
    <td class="order-list-body">
        <span class="payment-idx">
          {{ orderInfo.paymentIdx }}
        </span>
...(생략)

 

이 때 img 태그의 src 부분이 데이터 바인딩이 되는 부분이므로, 위의 <img src=""...부분을 <img v-bind:src""...>로 바꾸어준다. 이 때 아래 코드처럼, v-bind는 :로 대체 가능하다. 

 

...(생략)
<tr class="tr-main">
	<td class="order-list-img">
    	<img :src="orderInfo.goodsimg" alt />
    </td>
    <td class="order-list-body">
        <span class="payment-idx">
          {{ orderInfo.paymentIdx }}
        </span>
...(생략)

 

이미지가 잘 나오는 것을 확인할 수 있다.