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 tab切換,解決echartst圖表寬度只有100px的問(wèn)題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本文主要介紹了Vue3怎么使用element-plus，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>2021-11-11
vant/vue手機(jī)端長(zhǎng)按事件以及禁止長(zhǎng)按彈出菜單實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vant/vue手機(jī)端長(zhǎng)按事件以及禁止長(zhǎng)按彈出菜單實(shí)現(xiàn)方法詳解,需要的朋友可以參考下2022-12-12
vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作
這篇文章主要介紹了vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本篇文章主要介紹了如何理解Vue的render函數(shù)的具體用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue: WebStorm設(shè)置快速編譯運(yùn)行的方法
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運(yùn)行的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來(lái)處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
這篇文章主要介紹了總結(jié)vue映射的方法與混入的使用過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue/cli?配置動(dòng)態(tài)代理無(wú)需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，分為vue?init?webpack-simple?項(xiàng)目名和vue?init?webpack?項(xiàng)目名兩種，這篇文章主要介紹了vue/cli?配置動(dòng)態(tài)代理，無(wú)需重啟服務(wù),需要的朋友可以參考下2022-05-05