亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

axios請求后的VUE JS動態背景圖片

axios請求后的VUE JS動態背景圖片

慕碼人2483693 2022-10-13 16:07:53
我正在嘗試顯示一個背景圖像,它的路徑需要通過 API 加載。計劃是:從鏈接的主網格中,單擊一個并根據單擊的那個顯示背景圖像。到目前為止,我正在使用 axios 來查詢發送我需要的數據的 API。我的組件上有以下腳本部分。<script>import axios from 'axios'const lhost = require("@/config/global").host;let championData;export default {  name: 'IndividualChampion',  props: {      },  data: () => ({    champions: [],    verPersonagem: mdiMovieOpen,      }),  computed: {         },  created: async function() {      try {        let champion = this.$route.fullPath.split('/')[2];        let response = await axios.get(lhost + "/champion/" + champion + '/full');        championData = response.data        console.log(championData)        let background = '@/assets' + championData['skins']['0']['splash'].replace('.png','.jpg')    }     catch (e) {      return e;     }  },  methods: {   }  }</script>這是我的 HTML<template>    <div :style="{ backgroundImage: `url(${require(background)})` }">    </div></template>我已經搜索過,但似乎找不到加載背景圖像并在加載時顯示的解決方案。有人可以幫忙嗎?
查看完整描述

1 回答

?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

從您對 的使用來看'@/assets',您似乎正在使用帶有解析別名的 webpack。該表達式require(background)不足以讓 webpack 確定它需要添加到你的包中的文件。


您可以通過指定要從中加載文件的目錄來幫助 Webpack。你所要做的就是從后臺變量中取出'@/assets/'并直接在require調用中使用它,這樣Webpack就可以看到它。


<template>

    <div v-if="background" :style="{ backgroundImage: `url(${require('@/assets/' + background)})` }">


    </div>

</template>

<script>

import axios from 'axios'

const lhost = require("@/config/global").host;


let championData;


export default {

  name: 'IndividualChampion',

  props: {

    

  },

  data: () => ({

    champions: [],

    verPersonagem: mdiMovieOpen,

    background: ''

  }),

  computed: {

       

  },

  created: async function() {

      try {

        let champion = this.$route.fullPath.split('/')[2];

        let response = await axios.get(lhost + "/champion/" + champion + '/full');

        championData = response.data

        console.log(championData)

        this.background = championData['skins']['0']['loading'].replace('.png','.jpg')


    } 

    catch (e) {

      return e; 

    }

  },

  methods: { 


  }

  

}

</script>

不過,它將捆綁目錄中的所有可能文件。


您可以在此處閱讀更多相關信息:https ://webpack.js.org/api/module-methods/#dynamic-expressions-in-import


查看完整回答
反對 回復 2022-10-13
  • 1 回答
  • 0 關注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號