溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法

發(fā)布時(shí)間：2020-10-06 06:36:18 來(lái)源：腳本之家 閱讀：480 作者：不吃魚(yú)的貓咪 欄目：web開(kāi)發(fā)

一. 加載本地圖片

1.圖片目錄 

 vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法

2. 在data中配置圖片路徑

data() {
  return {
   formData: {
   avatar: require('@/assets/icon1524737568182.png'),
   motto: 'xxxxxxxxxx'
   },
   routers: this.$router.options.routes
  }
  }

3. 在需要的地方引入圖片

<div class="avatar"><img :src="formData.avatar" ></div>

二. 加載請(qǐng)求獲取到的圖片

1.配置文檔build/webpack.base.conf.js

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/icons')],
  options: {
   limit: 10000,
   name: utils.assetsPath('images/[name].[hash:7].[ext]')
  }
  },

vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法

2.圖片一類(lèi)的靜態(tài)文件，應(yīng)該放在這個(gè)static文件夾下，這個(gè)文件夾下的文件（夾）會(huì)按照原本的結(jié)構(gòu)放在網(wǎng)站根目錄下。這時(shí)我們?cè)偃ナ褂?static絕對(duì)路徑，就可以訪問(wèn)這些靜態(tài)文件了。

3.請(qǐng)求數(shù)據(jù)

created() {
 const that = this
 this.request({
  url: '/sysInfoFront/list',
  method: 'get'
 }).then(function(res) {
  const resData = res.data
  if (resData.code === 100) {
  const avatear = resData.data.avater
  resData.data.avatar = avatear
  that.formData = resData.data
  }
 })
 },

請(qǐng)求的結(jié)果：

vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法

4.在需要的地方引入圖片

<div class="avatar"><img :src="formData.avatar" ></div>

兩種方式的最終圖片顯示效果

vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手