關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題

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

1、目錄結(jié)構(gòu)如下

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

2、數(shù)據(jù)配置如下：

注意引入的路徑，直接從static文件中對(duì)應(yīng)的地方引入。

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

3、img標(biāo)簽動(dòng)態(tài)綁定src

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

</ul>

注意：此處的綁定，數(shù)據(jù)不要寫成 :src="｛｛i.src｝｝"之類的。這是錯(cuò)誤的！！！！

總結(jié)：

主要是圖片位置的問題，圖片存放在什么位置，能夠讓img通過src動(dòng)態(tài)的綁定對(duì)應(yīng)的值；

其次是圖片配置路徑的問題，若圖片就和響應(yīng)的vue在同一個(gè)文件，直接通過 ./logo.png 是只能寫死的情況下顯示，而動(dòng)態(tài)的：src綁定是無(wú)法完成這種情況的顯示。

以上這篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com