Question

所以我正在制作一个带控制面板的应用程序，我希望能够动态更改应用程序内部的一些图像，我的问题是，它只是不起作用

这是我想要改变的div

<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>

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

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

Answer 1

我认为可能是因为你设置了bg1url的承诺的值（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);
    });
},

Vue.js导入图像

1 个答案: