Vue.js导入图像

Question

So I am making an app with a control panel and i want to be able to change a few images inside the app dynamically and my problem is, it just won't work

This is the div I am trying to change

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

this is the script part of the Home.vue file

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

I have tried most of the suggestions on stack overflow but nothing seems to work. I use the default webpack configurations and generated structure

Note: the parts with axios fetching from the backend work correctly. The only problem is adding the image to the style.

Answer 1

I think could be because you are setting the value for bg1url outsite of promise (calback function of axios), and so this make the code sync and not async

so please try to update, use this instead

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);
    });
},