I'm fairly new to VueJS and I am trying to display a background image loaded from an API on my webpage. Unfortunately, the image loading process is not working as expected.
Below is the code snippet:
<template>
<div id="bio" :style="{ backgroundImage: 'url(' + this.settings.bio_bg.url +')' }">
<h1>Biography</h1>
<router-link to="/">Home</router-link><br />
<span>Biography</span><br />
<router-link to="/shop">Shop</router-link><br />
<router-link to="/contact">Contact</router-link><br />
</div>
</template>
<style scoped>
</style>
<script>
export default {
data () {
return {
settings: {},
bio: {}
}
},
created () {
.catch(error => this.setError(error))
this.$http.secured.get('/settings')
.then(response => {
this.settings = response.data
console.log(this.settings)
})
.catch(error => this.setError(error))
}
}
</script>
The background image is being loaded but I encountered two errors in the console:
Error in render: "TypeError: Cannot read property 'url' of undefined"
Cannot read property 'url' of undefined
I suspect that due to Axios being asynchronous, the data loads after the page rendering completes. Therefore, what would be the correct approach to properly handle this asynchronously?
I have attempted some React-inspired methods but the image still does not load (even though the errors disappear)
Appreciate any advice or guidance. Thank you!