vue在data中定義圖片相對(duì)路徑：

data() { return { active: 1, icon: { active: '../assets/images/home-selected.png', inactive: '../assets/images/home.png' } }; }

頁(yè)面使用vant的標(biāo)簽欄自定義圖標(biāo)：

<van-tabbar v-model='active'> <van-tabbar-item info='3'> <!-- <span>首頁(yè)</span> --> <img slot='icon' slot-scope='props' :src='http://www.b3g6.com/bcjs/props.active ? icon.active : icon.inactive' /> </van-tabbar-item> <van-tabbar-item icon='search'>標(biāo)簽</van-tabbar-item> <van-tabbar-item icon='setting-o'>標(biāo)簽</van-tabbar-item> </van-tabbar>

結(jié)果圖片沒(méi)有在頁(yè)面上顯示，

解決辦法：

1：使用絕對(duì)路徑，域名形式：https://

2：使用require：

data() { return { active: 1, icon: { active: require('../assets/images/home-selected.png'), inactive: require('../assets/images/home.png') } }; }

補(bǔ)充知識(shí)：Vue在data中存入靜態(tài)圖片地址，使用別名引入的方法

在項(xiàng)目開(kāi)發(fā)中，icons的引入遇見(jiàn)了麻煩

在data中存入一組圖片地址，并且循環(huán)渲染到組件上

<div v-for='icon of list' :key='icon.type' @click='Jump(icon.type)'> <img :src='http://www.b3g6.com/bcjs/icon.imgUrl' /> <p class='icons-desc'>{{icon.desc}}</p></div>data () { return { list: [ { 'type': 'scenic', 'imgUrl': ’assets/webIcons/scenic.png’, 'desc': '景點(diǎn)門(mén)票' } ] } }

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)有問(wèn)題

圖片地址沒(méi)有背正確的解析

解決辦法

在html中 需要在別名前面加上 ~ 符號(hào)

<img src='http://www.b3g6.com/bcjs/~assets/webIcons/scenic.png' />

在js中，需要使用require(’url’)

list: [ { 'type': 'scenic', 'imgUrl': require(’assets/webIcons/scenic.png’), 'desc': '景點(diǎn)門(mén)票' } ]

這樣圖片就可以成功引入了

以上這篇vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。