Currently, I am in the process of developing an application that features a control panel. One of my objectives is to implement dynamic image changes within the app. However, I have encountered a persistent issue hindering this functionality.
The specific DOM element that I am attempting to modify is as follows:
<div class="bg-image bg-parallax overlay" :style="`background-image:url(${bg1url})`"></div>
This excerpt pertains to the script section found in the Home.vue file:
<script>
import axios from 'axios';
export default {
name: 'Home',
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>
Despite exploring multiple recommendations on platforms like Stack Overflow, none have resolved the issue at hand. It should be noted that I am utilizing the default webpack configurations and project structure.
Please be advised that the portion involving axios fetching from the backend is operational. The primary challenge revolves around integrating the image into the style attribute.