【Vue】vue v-for循環解決img標籤的src動態綁定問題

return {
    product:[
    {
    	"src":'../../static/slider/logo1.jpg',
    	"deceration":"產品1",
    	"price":100,
    	"id":1
    },
    {
    	"src":"../../static/slider/logo.png",
    	"deceration":"產品2",
    	"price":150,
    	"id":2
    },
    {
    	"src":"../../static/slider/logo.png",
    	"deceration":"產品3",
    	"price":180,
    	"id":3
    }
    ]
}

}

3、img標籤動態綁定src

<ul v-for="i in product" class="clear">
	<li>
		<img :src="i.src"/>
	</li>
	<li>
	       <button>立即購買</button>
	</li>
        <br />

</ul>

注意：此處的綁定，數據寫成 :src="｛｛i.src｝｝",是錯誤的做法。

總結：主要是圖片位置的問題，圖片存放在什麼位置，能夠讓img通過src動態的綁定對應的值；

其次是圖片配置路徑的問題，若圖片就和響應的vue在同一個文件，直接通過 ./logo.png 是隻能寫死的情況下顯示，而動態的：src綁定是無法完成這種情況的顯示。