axios请求后的VUE JS动态背景图片

Question

我正在尝试显示一个背景图像，它的路径需要通过 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>我已经搜索过，但似乎找不到加载背景图像并在加载时显示的解决方案。有人可以帮忙吗？

Answer 1

从您对 的使用来看'@/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