Javascript Vue.js导入图像

因此，我正在制作一个带有控制面板的应用程序，我希望能够动态更改应用程序中的一些图像，但我的问题是，它无法工作

这就是我想要改变的部门

<div class="bg-image bg-parallax overlay" :style="`background-image:url(${bg1url})`"></div>

这是Home.vue文件的脚本部分

<script>
import axios from 'axios';
export default {
    name: 'Home', //  this is the name of the component
    data () {
        return{
            page_data: {},
            bg1url: null,
        };
    },
    created() {
        axios.get("http://localhost:5001/api/v1/pages")
            .then((result) => {this.page_data = result.data.page_data});
        this.bg1url = require('@/assets/img/' + this.page_data.background1);
        alert(page_data.background1);
    },
};
</script>

从“axios”导入axios；
导出默认值{
name:'Home'，//这是组件的名称
数据（）{
返回{
第页数据：{}，
bg1url:空，
};
},
创建（）{
axios.get（“http://localhost:5001/api/v1/pages")
.then（（result）=>{this.page_data=result.data.page_data}）；
this.bg1url=require（'@/assets/img/'+this.page_data.background1）；
警报（第1页数据背景）；
},
};

我已经尝试了大多数关于堆栈溢出的建议，但似乎没有任何效果。 我使用默认的网页包配置和生成的结构

---

注意：从后端获取axios的部件工作正常。唯一的问题是将图像添加到样式中。

我认为可能是因为您正在为bg1url outsite of promise（axios的calback函数）设置值，因此这会使代码同步而不是异步

所以请尝试更新，改用这个

created() {
    axios.get("http://localhost:5001/api/v1/pages").then(result => {
        this.page_data = result.data.page_data
        this.bg1url = require('@/assets/img/' + this.page_data.background1);
    });
},

---

您不应该将

bg1url

设置为URL吗，而不是

Image

对象本身？你不需要在

Promise

中执行最后两条语句吗？我尝试过，但仍然显示为null它仍然注册为null你没有“require”的情况下尝试过，比如：

this.bg1url='@/assets/img/'+this.page_data.background1

它就是找不到它，在我这样说之后，在浏览器的url中我看到了，但没有找到图像。如果我这样做的话，也会发生同样的事情../哪一条是相对路径