在解決這個問題上，遇到了很多錯誤的方案，一直沒有跑通，有些是圖片標記出現了，但是圖片內容沒有出現，這就很讓人頭疼了，下面，我講解我操作成功的案例吧。

1、目錄結構如下

圖片放置在與src同級的static文件夾下，在這里，我放置在slider中

2、數據配置如下：

注意引入的路徑，直接從static文件中對應的地方引入。

data () { 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綁定是無法完成這種情況的顯示。

以上這篇關于vue v-for循環解決img標簽的src動態綁定問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。