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

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動態綁定問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com