vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)
更新時(shí)間：2022年04月22日 15:39:18 作者：ji_ban
這篇文章主要介紹了vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
動(dòng)態(tài)綁定img的src屬性(v-bind)
今天遇到一個(gè)特別坑爹問題，頁面中使用img動(dòng)態(tài)綁定圖片路徑時(shí)總是不顯示。(處理前的代碼)
<div class="prod-content">
<div class="prod-item" v-for="(item,index) in Merchant" :key="index">
<img :src="item.imgUrl" alt="">
<span>{{item.name}}</span>
</div>
</div>Merchant:[
{imgUrl:'../../assets/image/凱叔講故事.png',name:'凱叔講故事'},
{imgUrl:'../../assets/image/樊登讀書.png',name:'樊登讀書'},
{imgUrl:'../../assets/image/QQ音樂.png',name:'QQ音樂'},
{imgUrl:'../../assets/image/滴滴出行.png',name:'滴滴出行 '},
{imgUrl:'../../assets/image/沃爾瑪.png',name:'沃爾瑪'},
{imgUrl:'../../assets/image/星巴克.png',name:'星巴克'},
{imgUrl:'../../assets/image/愛奇藝.png',name:'愛奇藝'},
{imgUrl:'../../assets/image/騰訊視頻.png',name:'騰訊視頻'},
{imgUrl:'../../assets/image/優(yōu)酷.png',name:'優(yōu)酷'},
{imgUrl:'../../assets/image/攜程.png',name:'攜程'},
],
解決辦法
圖片鏈接是需要通過 require包裹。這樣圖片就可以正常顯示啦。(網(wǎng)絡(luò)請求的數(shù)據(jù)應(yīng)該做相應(yīng)的處理)
*** 圖片的路徑不要出行中文，這里只是做演示
Merchant:[
{imgUrl:require('../../assets/image/凱叔講故事.png'),name:'凱叔講故事'},
{imgUrl:require("../../assets/image/樊登讀書.png"),name:'樊登讀書'},
{imgUrl:require("../../assets/image/QQ音樂.png"),name:'QQ音樂'},
{imgUrl:require("../../assets/image/攜程.png"),name:'攜程'},
{imgUrl:require("../../assets/image/滴滴出行.png"),name:'滴滴出行'},
{imgUrl:require("../../assets/image/沃爾瑪.png"),name:'沃爾瑪'},
{imgUrl:require("../../assets/image/星巴克.png"),name:'星巴克'},
{imgUrl:require("../../assets/image/愛奇藝.png"),name:'愛奇藝'},
{imgUrl:require("../../assets/image/騰訊視頻.png"),name:'騰訊視頻'},
{imgUrl:require("../../assets/image/優(yōu)酷.png"),name:'優(yōu)酷'},
],
vue添加img的src地址 v-bind
vue獲取數(shù)據(jù)用{{ a }}
但是放在img標(biāo)簽的src里面不被解析
按照上述用法
html部分
?<div id="test2">
? ? ? ? <img src="{{ url }}" alt="">
? ? </div>js部分
?const vm1 = new Vue({
? ? ? ? ? ? el: '#test2',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? url: "a.jpg",
? ? ? ? ? ? }
? ? ? ? })這樣的話 控制臺(tái)會(huì)報(bào)錯(cuò) img的地址不會(huì)被解析
正確的用法 通過v-bind進(jìn)行綁定
?<div id="test2"> ? ? ? ? <img v-bind:src="url" alt=""> ? ? </div>
這樣在進(jìn)行輸出的時(shí)候，就會(huì)解析url
如果標(biāo)簽內(nèi)有很多屬性的話，v-bind就需要寫很多，看起來就會(huì)顯得非常亂
vue還提供了一個(gè)簡寫，就是在屬性前面加個(gè) 冒號 ，例如 ：src='url' ,同樣可以解決上面的問題
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3單頁構(gòu)建大型項(xiàng)目方案
這篇文章主要介紹了vue-cli3單頁構(gòu)建大型項(xiàng)目方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)
這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見問題解決方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)移動(dòng)端適方案的完整步驟
現(xiàn)在的手機(jī)五花八門,造就了移動(dòng)端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持與UI圖一致的效果,就成了讓前端不得不頭疼的問題,下面這篇文章主要給大家介紹了vue實(shí)現(xiàn)移動(dòng)端適方案的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中的input框點(diǎn)擊后不聚焦問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3除了keep-alive還有哪些實(shí)現(xiàn)頁面緩存詳解
Vue3中的keep-alive組件用于緩存頁面,以便在切換頁面時(shí)保留其狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Vue3除了keep-alive還有哪些實(shí)現(xiàn)頁面緩存的相關(guān)資料,需要的朋友可以參考下2024-04-04
在Vue3中使用CSS Modules實(shí)現(xiàn)樣式隔離
隨著構(gòu)建現(xiàn)代前端應(yīng)用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應(yīng)運(yùn)而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實(shí)現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
對應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了Vue傳遞參數(shù)不在URL路徑拼接顯示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue Element前端應(yīng)用開發(fā)之界面語言國際化
我們開發(fā)的系統(tǒng)，一般可以不用考慮語言國際化的問題，大多數(shù)系統(tǒng)一般是給本國人使用的，而且直接使用中文開發(fā)界面會(huì)更加迅速 一些，不過框架最好能夠支持國際化的處理，以便在需要的時(shí)候，可以花點(diǎn)時(shí)間來實(shí)現(xiàn)多語言切換的處理，使系統(tǒng)具有更廣泛的受眾用戶。2021-05-05
本篇文章通過代碼實(shí)例給大家詳細(xì)講述了一個(gè)vue的實(shí)例，實(shí)現(xiàn)只彈一次彈框功能，一起學(xué)習(xí)分享下。2018-01-01