關(guān)于vue v-for循環(huán)解決img標簽的src動態(tài)綁定問題
更新時間：2018年09月18日 14:00:50 作者：ColourfulTiger
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標簽的src動態(tài)綁定問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在解決這個問題上，遇到了很多錯誤的方案，一直沒有跑通，有些是圖片標記出現(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標簽動態(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標簽的src動態(tài)綁定問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來實現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情
這篇文章主要為大家介紹了VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了使用window.open和vue router新開頁面方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
因為新公司使用react技術(shù)棧，包括Umi、Dva、Ant-design等一系列解決方案。本文就簡單的介紹一下vue轉(zhuǎn)react入門指南，感興趣的可以了解一下2021-10-10
這篇文章主要介紹了vue3.0 自適應(yīng)不同分辨率電腦的操作,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
關(guān)于iview按需引用后使用this.$Modal報錯的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue使用Proxy實現(xiàn)雙向綁定的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了使用v-memo緩存模板子樹提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
網(wǎng)頁中滑動圖片驗證一直是各大網(wǎng)站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護方式，這篇文章主要介紹了vue?實現(xiàn)左滑圖片驗證,需要的朋友可以參考下2023-04-04