vue 解決data中定義圖片相對路徑頁面不顯示的問題
更新時間：2020年08月13日 15:11:28 作者：讓我看看誰在學(xué)習(xí)
這篇文章主要介紹了vue 解決data中定義圖片相對路徑頁面不顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue在data中定義圖片相對路徑：
data() {
return {
active: 1,
icon: {
active: "../assets/images/home-selected.png",
inactive: "../assets/images/home.png"
}
};
}
頁面使用vant的標簽欄自定義圖標：
<van-tabbar v-model="active">
<van-tabbar-item info="3">
<!-- <span>首頁</span> -->
<img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.inactive" />
</van-tabbar-item>
<van-tabbar-item icon="search">標簽</van-tabbar-item>
<van-tabbar-item icon="setting-o">標簽</van-tabbar-item>
</van-tabbar>
結(jié)果圖片沒有在頁面上顯示，
解決辦法：
1：使用絕對路徑，域名形式：https://
2：使用require：
data() {
return {
active: 1,
icon: {
active: require("../assets/images/home-selected.png"),
inactive: require("../assets/images/home.png")
}
};
}
補充知識：Vue在data中存入靜態(tài)圖片地址，使用別名引入的方法
在項目開發(fā)中，icons的引入遇見了麻煩
在data中存入一組圖片地址，并且循環(huán)渲染到組件上
<div class="icons-item" v-for="icon of list" :key="icon.type" @click="Jump(icon.type)">
<img class="icons-img" :src="icon.imgUrl" />
<p class="icons-desc">{{icon.desc}}</p>
</div>
data () {
return {
list: [
{
"type": "scenic",
"imgUrl": 'assets/webIcons/scenic.png',
"desc": "景點門票"
}
]
}
}
webpack已經(jīng)配置了別名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'),
'common': resolve('src/common'),
'assets': resolve('src/assets')
}
},
但是發(fā)現(xiàn)有問題
圖片地址沒有背正確的解析
解決辦法
在html中 需要在別名前面加上 ~ 符號
<img src="~assets/webIcons/scenic.png" />
在js中，需要使用require('url')
list: [
{
"type": "scenic",
"imgUrl": require('assets/webIcons/scenic.png'),
"desc": "景點門票"
}
]
這樣圖片就可以成功引入了
以上這篇vue 解決data中定義圖片相對路徑頁面不顯示的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項目配置@別名全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+el-element中根據(jù)文件名動態(tài)創(chuàng)建dialog的方法實踐
本文主要介紹了vue+el-element中根據(jù)文件名動態(tài)創(chuàng)建dialog的方法實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題
這篇文章主要介紹了使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue component組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue依賴收集引發(fā)的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue獲取當前日期時間(使用moment和new?Date())
在項目開發(fā)中我遇到了日期范圍選擇器,兩種獲取當前日期并做處理的寫法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當前日期時間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue使用less報錯:Inline JavaScript is not ena
這篇文章主要介紹了vue使用less報錯:Inline JavaScript is not enabled問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Element-Plus實現(xiàn)動態(tài)渲染圖標的示例代碼
在Element-Plus中，我們可以使用component標簽來動態(tài)渲染組件，本文主要介紹了Element-Plus?實現(xiàn)動態(tài)渲染圖標教程，具有一定的參考價值，感興趣的可以了解一下2024-03-03