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

Posted 2023-02-22

【中文标题】axios请求后的VUE JS动态背景图片

【英文标题】：VUE JS Dynamic background image after axios request

【发布时间】：2020-10-11 19:07:54

【问题描述】：

我正在尝试显示一个背景图像，它的路径需要通过 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】：

从您对'@/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

【讨论】：

感谢您的帮助！这导致 div 有这样的： 结果应该是，例如 有什么想法吗？编辑：console.log() 显示正确的路径 /splash/Riven_0.jpg

经过一番干预后，我发现我太困了，无法做到这一点。非常感谢，您的回答帮了很大的忙！