vue踩坑記錄之src的動態(tài)綁定賦值問題
更新時間：2023年06月06日 08:51:23 作者：Milan_KunderLa
這篇文章主要介紹了vue踩坑記錄之src的動態(tài)綁定賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue src的動態(tài)綁定賦值問題
我的需求是這樣的，在一個頁面點擊了路由器的鏈路，將某個對象傳遞給下一個頁面，這個對象的其中就包含了一個{遞減：''，IMG：''}這樣的對象數(shù)組，我想在跳轉(zhuǎn)的頁面將這個IMG顯示出來，于是我這樣做：
在跳轉(zhuǎn)的下一個頁面接收這個數(shù)組DUI
在HTML中進行展示
賦值的語句并沒有什么錯誤，
但是出現(xiàn)了下面的結(jié)果：
其中文字內(nèi)容能夠正常顯示，說明傳遞的數(shù)據(jù)沒有錯
但是由于在div中顯示之前，webpack并沒有去編譯我的desc.img
因此我找到原因如下：
原先考慮的是直接將URL傳遞過去就行，但是這導(dǎo)致這個圖片根本不能被編譯被識別，所以修改如下：
結(jié)果如下：圖片正常顯示
vue動態(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 中我們需要什么出來
data() {
return {
imgURL : require(`@/assets/mapPoint/blue.png`);
//imgURL : require(`@/assets/mapPoint/red.png`);
//imgURL : require(`@/assets/mapPoint/yellow.png`);
};
},如果我們是從后臺讀取的，需要在methos 請求方法中進行 找出來 當前要顯示的路徑地址。
然后綁定出來 在方法中賦值
this.imgURL = "www.baidu.com/1.jpg"
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了Vue3怎么使用element-plus，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
vant/vue手機端長按事件以及禁止長按彈出菜單實現(xiàn)方法詳解
這篇文章主要介紹了vant/vue手機端長按事件以及禁止長按彈出菜單實現(xiàn)方法詳解,需要的朋友可以參考下2022-12-12
vue內(nèi)置組件component--通過is屬性動態(tài)渲染組件操作
這篇文章主要介紹了vue內(nèi)置組件component--通過is屬性動態(tài)渲染組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了如何理解Vue的render函數(shù)的具體用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
這篇文章主要介紹了總結(jié)vue映射的方法與混入的使用過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue/cli?配置動態(tài)代理無需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，分為vue?init?webpack-simple?項目名和vue?init?webpack?項目名兩種，這篇文章主要介紹了vue/cli?配置動態(tài)代理，無需重啟服務(wù),需要的朋友可以參考下2022-05-05