vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問(wèn)題
vue src的動(dòng)態(tài)綁定賦值問(wèn)題
我的需求是這樣的，在一個(gè)頁(yè)面點(diǎn)擊了路由器的鏈路，將某個(gè)對(duì)象傳遞給下一個(gè)頁(yè)面，這個(gè)對(duì)象的其中就包含了一個(gè){遞減：''，IMG：''}這樣的對(duì)象數(shù)組，我想在跳轉(zhuǎn)的頁(yè)面將這個(gè)IMG顯示出來(lái)，于是我這樣做：
在跳轉(zhuǎn)的下一個(gè)頁(yè)面接收這個(gè)數(shù)組DUI
在HTML中進(jìn)行展示
賦值的語(yǔ)句并沒(méi)有什么錯(cuò)誤，
但是出現(xiàn)了下面的結(jié)果：
其中文字內(nèi)容能夠正常顯示，說(shuō)明傳遞的數(shù)據(jù)沒(méi)有錯(cuò)
但是由于在div中顯示之前，webpack并沒(méi)有去編譯我的desc.img
因此我找到原因如下：
原先考慮的是直接將URL傳遞過(guò)去就行，但是這導(dǎo)致這個(gè)圖片根本不能被編譯被識(shí)別，所以修改如下：
結(jié)果如下：圖片正常顯示
vue動(dòng)態(tài)綁定設(shè)置圖片src路徑
template 中的內(nèi)容：
<!-- <img :src="imgURL" style="width: 100px;height: 100px; "/> --> <img src="https://www.cugb.edu.cn/website/images/cugb_badge.png" alt="">
在data 中我們需要什么出來(lái)
data() {
return {
imgURL : require(`@/assets/mapPoint/blue.png`);
//imgURL : require(`@/assets/mapPoint/red.png`);
//imgURL : require(`@/assets/mapPoint/yellow.png`);
};
},如果我們是從后臺(tái)讀取的，需要在methos 請(qǐng)求方法中進(jìn)行 找出來(lái) 當(dāng)前要顯示的路徑地址。
然后綁定出來(lái) 在方法中賦值
this.imgURL = "www.baidu.com/1.jpg"
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何通過(guò)某個(gè)字段獲取詳細(xì)信息
這篇文章主要介紹了vue如何通過(guò)某個(gè)字段獲取詳細(xì)信息，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說(shuō)明
這篇文章主要介紹了vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue3中封裝axios請(qǐng)求最新實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue3中封裝axios請(qǐng)求的最新實(shí)現(xiàn)步驟,在Vue 3中可以通過(guò)封裝axios來(lái)實(shí)現(xiàn)接口的統(tǒng)一管理和調(diào)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
在vue項(xiàng)目中假使我們?cè)谕粋€(gè)路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽(tīng)路由的變化的相關(guān)資料,需要的朋友可以參考下2023-09-09
Hexo已經(jīng)看膩了，來(lái)手把手教你使用VuePress搭建個(gè)人博客
vuepress是尤大大4月12日發(fā)布的一個(gè)全新的基于vue的靜態(tài)網(wǎng)站生成器，實(shí)際上就是一個(gè)vue的spa應(yīng)用，內(nèi)置webpack，可以用來(lái)寫(xiě)文檔。這篇文章給大家介紹了VuePress搭建個(gè)人博客的過(guò)程，感興趣的朋友一起看看吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了基于vue和websocket的多人在線聊天室,需要的朋友可以參考下2020-02-02
用戶(hù)可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無(wú)重名的文件,如果有會(huì)返回重名文件的名稱(chēng)數(shù)組,這些文件需要一個(gè)一個(gè)的向用戶(hù)確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹的相關(guān)資料,Vue項(xiàng)目目錄結(jié)構(gòu)是指在開(kāi)發(fā)Vue項(xiàng)目時(shí),為了更好地組織和管理代碼,將不同的文件按照一定的規(guī)則和層次結(jié)構(gòu)進(jìn)行分類(lèi)和存放的方式,需要的朋友可以參考下2023-12-12
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說(shuō)可以用 vue-draggable-plus 這個(gè)庫(kù)來(lái)實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01