Vue 中對(duì)圖片地址進(jìn)行拼接的方法
更新時(shí)間：2018年09月03日 10:28:05 作者：愛(ài)吃排骨
今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
拿到一組數(shù)據(jù)，其中的img地址是這樣的
我們想要將它轉(zhuǎn)化為正常的圖片地址，需要使用for循環(huán)來(lái)將圖片拼接起來(lái)
getSingList(){
getSingerList().then((res) =>{
if (res.code==ERR_ok){
this.singers=res.data.list
console.log(this.singers)
for(var i=0;i<this.singers.length;i++){
this.singers[i].Fsinger_mid='//y.gtimg.cn/music/photo_new/T001R300x300M000'+this.singers[i].Fsinger_mid+'.jpg?max_age=2592000'
}
}
})
}
},
這樣我們就可以正確輸出 我們想要的img url地址了
<ul class="singerPosti">
<li v-for="item in sortList" class="singerConten">
<div class="avatar">
<img :src="item.Fsinger_mid" ></img>
</div>
<div class="list">
<span>{{item.Fsinger_name}}</span>
</div>
</li>
</ul>
以上這篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中watch監(jiān)聽(tīng)屬性新舊值相同的問(wèn)題解決方案
這篇文章主要給大家分享了Vue中watch監(jiān)聽(tīng)屬性新舊值相同問(wèn)題解決方案,如果有遇到相同問(wèn)題的朋友,可以參考閱讀本文2023-08-08
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章給大家詳細(xì)介紹了 Vue3 的虛擬DOM生成規(guī)則,文章通過(guò)代碼示例和圖片介紹的非常詳細(xì),具有一定的參考價(jià)值,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題
今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue中實(shí)現(xiàn)權(quán)限控制的方法示例
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限控制的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
vue cli使用絕對(duì)路徑引用圖片問(wèn)題的解決
這篇文章主要給大家介紹了關(guān)于vue cli使用絕對(duì)路徑引用圖片問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-12-12
這篇文章主要介紹了vue3如何獲取綁定頁(yè)面dom元素問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3+ts中ref與reactive指定類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
要在Vue?3和Electron中實(shí)現(xiàn)本地化,可以使用類似于在Vue項(xiàng)目中進(jìn)行本地化的方式,本文為大家介紹了一種常見(jiàn)的做法,希望對(duì)大家有所幫助2024-03-03