vue 解決data中定義圖片相對路徑頁面不顯示的問題
更新時間：2020年08月13日 15:11:28 作者：讓我看看誰在學習
這篇文章主要介紹了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的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
今天小編就為大家分享一篇VUE 解決mode為history頁面為空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用vue2.0實現(xiàn)自定義彈窗指令，當標簽有該指令時，點擊標簽可以彈出彈窗。下面通過實例代碼給大家介紹Vue自定義彈窗指令的相關(guān)知識，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了詳解Vue路由開啟keep-alive時的注意點，非常具有實用價值，有興趣的朋友可以了解一下2017-06-06
這篇文章是一篇Vue.js的教程，目標在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計思想。2016-10-10
這篇文章主要介紹了一個基于vue.js無縫滾動效果,文中給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-01-01
Vue中使用XMLHttpRequest（XHR）可以獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同，本文主要來和大家講講它的正確使用方法，希望對大家有所幫助2023-05-05
要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項目中遇到的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Vue3中使用ref標簽對組件進行操作方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04