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