快捷導(dǎo)航

vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問題

更新時(shí)間：2020年08月13日 15:11:28 作者：讓我看看誰(shuí)在學(xué)習(xí)

這篇文章主要介紹了vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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="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é)果圖片沒有在頁(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)目開發(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": "景點(diǎ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)有問題

圖片地址沒有背正確的解析

解決辦法

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

<img src="~assets/webIcons/scenic.png" />

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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