Apologies if this is evident
I'm in the process of generating thousands of pages using nuxt generate like so
<template>
<div>
<div class="main-picture">
<span>{{landing.name}}<span>
</div>
</div>
<template>
<script>
import { landingshs } from '~/db/landingshs'
export default {
data() {
return {
link: "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg"
}
},
asyncData({ params }) {
const landing = landingshs.find(l => l.id === params.id)
return {landing}
},
</script>
Now I am attempting to display an image like this
<style>
.main-picture {
width: 1000px;
height: 1000px;
background-image: v-bind("`url(${link})`");
}
</style>
I have also tried another approach but with no luck. With this method, there isn't even a request in the network
mounted() {
setTimeout(() =>{
document.querySelector('.main-picture').style.backgroundImage = "url(" + this.link + ")";
}, 5000);
},
Everything works well when creating a regular page (not _id.vue)
nuxt generate functions properly, inserts all necessary data