關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題
在解決這個(gè)問(wèn)題上，遇到了很多錯(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é)：
主要是圖片位置的問(wèn)題，圖片存放在什么位置，能夠讓img通過(guò)src動(dòng)態(tài)的綁定對(duì)應(yīng)的值；
其次是圖片配置路徑的問(wèn)題，若圖片就和響應(yīng)的vue在同一個(gè)文件，直接通過(guò) ./logo.png 是只能寫死的情況下顯示，而動(dòng)態(tài)的：src綁定是無(wú)法完成這種情況的顯示。
以上這篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題
- vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作
- 解決vuecli3中img src 的引入問(wèn)題
- Vue中img的src是動(dòng)態(tài)渲染時(shí)不顯示的解決
- vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法
- vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
- Vue.js 動(dòng)態(tài)為img的src賦值方法
- vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
相關(guān)文章
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了Vue之定義全局工具類問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vuex 項(xiàng)目結(jié)構(gòu)目錄及一些簡(jiǎn)單配置介紹
這篇文章主要介紹了vuex 項(xiàng)目結(jié)構(gòu)目錄及一些簡(jiǎn)單配置,需要的朋友可以參考下2018-04-04
vue 返回上一頁(yè),頁(yè)面樣式錯(cuò)亂的解決
今天小編就為大家分享一篇vue 返回上一頁(yè),頁(yè)面樣式錯(cuò)亂的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
本篇和大家分享的是學(xué)習(xí)Vuejs的總結(jié)和調(diào)用webapi的一個(gè)小示例；具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
vue.js自定義組件directives的實(shí)例代碼
這篇文章主要介紹了vue.js自定義組件directives的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue移動(dòng)端下拉刷新組件的使用教程，每一次我在使用vant組件庫(kù)里面list組件和下拉刷新連在一起用的時(shí)候都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突，這就很難受，這篇文章將解決它2023-04-04
解決ant Design中Select設(shè)置initialValue時(shí)的大坑
這篇文章主要介紹了解決ant Design中Select設(shè)置initialValue時(shí)的大坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令
本篇文章主要介紹了詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09