溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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>結果圖片沒有在頁面上顯示，
解決辦法：
1：使用絕對路徑，域名形式：https://
2：使用require：
data() {
return {
active: 1,
icon: {
active: require("../assets/images/home-selected.png"),
inactive: require("../assets/images/home.png")
}
};
}
補充知識：Vue在data中存入靜態圖片地址，使用別名引入的方法
在項目開發中，icons的引入遇見了麻煩
在data中存入一組圖片地址，并且循環渲染到組件上
<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已經配置了別名
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')
}
},但是發現有問題
圖片地址沒有背正確的解析
解決辦法
在html中 需要在別名前面加上 ~ 符號
<img src="~assets/webIcons/scenic.png" />
在js中，需要使用require('url')
list: [
{
"type": "scenic",
"imgUrl": require('assets/webIcons/scenic.png'),
"desc": "景點門票"
}
]這樣圖片就可以成功引入了
感謝各位的閱讀！看完上述內容，你們對vue data中定義圖片相對路徑頁面不顯示怎么辦大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
