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à)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
動(dòng)態(tài)綁定img的src屬性(v-bind)
今天遇到一個(gè)特別坑爹問(wèn)題，頁(yè)面中使用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/樊登讀書(shū).png',name:'樊登讀書(shū)'},
{imgUrl:'../../assets/image/QQ音樂(lè).png',name:'QQ音樂(lè)'},
{imgUrl:'../../assets/image/滴滴出行.png',name:'滴滴出行 '},
{imgUrl:'../../assets/image/沃爾瑪.png',name:'沃爾瑪'},
{imgUrl:'../../assets/image/星巴克.png',name:'星巴克'},
{imgUrl:'../../assets/image/愛(ài)奇藝.png',name:'愛(ài)奇藝'},
{imgUrl:'../../assets/image/騰訊視頻.png',name:'騰訊視頻'},
{imgUrl:'../../assets/image/優(yōu)酷.png',name:'優(yōu)酷'},
{imgUrl:'../../assets/image/攜程.png',name:'攜程'},
],
解決辦法
圖片鏈接是需要通過(guò) require包裹。這樣圖片就可以正常顯示啦。(網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)應(yīng)該做相應(yīng)的處理)
*** 圖片的路徑不要出行中文，這里只是做演示
Merchant:[
{imgUrl:require('../../assets/image/凱叔講故事.png'),name:'凱叔講故事'},
{imgUrl:require("../../assets/image/樊登讀書(shū).png"),name:'樊登讀書(shū)'},
{imgUrl:require("../../assets/image/QQ音樂(lè).png"),name:'QQ音樂(lè)'},
{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/愛(ài)奇藝.png"),name:'愛(ài)奇藝'},
{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ì)被解析
正確的用法 通過(guò)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就需要寫(xiě)很多，看起來(lái)就會(huì)顯得非常亂
vue還提供了一個(gè)簡(jiǎn)寫(xiě)，就是在屬性前面加個(gè) 冒號(hào) ，例如 ：src='url' ,同樣可以解決上面的問(wèn)題
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目出現(xiàn)頁(yè)面空白的解決方案
今天小編就為大家分享一篇vue項(xiàng)目出現(xiàn)頁(yè)面空白的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
nuxt踩坑之Vuex狀態(tài)樹(shù)的模塊方式使用詳解
這篇文章主要介紹了nuxt踩坑之Vuex狀態(tài)樹(shù)的模塊方式使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue3生命周期原理與生命周期函數(shù)簡(jiǎn)單應(yīng)用實(shí)例分析
這篇文章主要介紹了vue3生命周期原理與生命周期函數(shù),結(jié)合簡(jiǎn)單實(shí)例形式分析了vue3的生命周期基本原理、以及各個(gè)階段的生命周期鉤子函數(shù)功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04
vue2+element-ui使用vue-i18n進(jìn)行國(guó)際化的多語(yǔ)言/國(guó)際化詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于vue2+element-ui使用vue-i18n進(jìn)行國(guó)際化的多語(yǔ)言/國(guó)際化的相關(guān)資料,I18n是Vue.js的國(guó)際化插件,項(xiàng)目里面的中英文等多語(yǔ)言切換會(huì)使用到這個(gè)東西,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過(guò)兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue中keep-alive的兩種應(yīng)用方式，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對(duì)比時(shí)辨識(shí)VNodes。這篇文章主要給大家介紹Vue中key的作用，感興趣的朋友跟隨小編一起看看吧2020-06-06
這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue清空數(shù)組的幾個(gè)方式(小結(jié))
本文主要介紹了vue清空數(shù)組的幾個(gè)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家介紹了前端框架封裝Vue第三方組件的三個(gè)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07