vue data中定義圖片相對路徑頁面不顯示怎么辦

發(fā)布時間：2020-08-14 13:52:23 來源：億速云閱讀：385 作者：小新欄目：開發(fā)技術

vue data中定義圖片相對路徑頁面不顯示怎么辦？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热?，讓我們一起來看看吧?/p>

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 &#63; 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>

結果圖片沒有在頁面上顯示，

vue data中定義圖片相對路徑頁面不顯示怎么辦

解決辦法：

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

2：使用require：

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

vue data中定義圖片相對路徑頁面不顯示怎么辦

補充知識：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已經配置了別名

 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ā)現有問題

vue data中定義圖片相對路徑頁面不顯示怎么辦

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

解決辦法

在html中需要在別名前面加上 ~ 符號

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

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

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

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

vue data中定義圖片相對路徑頁面不顯示怎么辦

感謝各位的閱讀！看完上述內容，你們對vue data中定義圖片相對路徑頁面不顯示怎么辦大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

vue data中定義圖片相對路徑頁面不顯示怎么辦

猜你喜歡

最新資訊

相關推薦

相關標簽