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