I am in the process of developing a Nuxt.js application and I have a requirement to dynamically set the background image of an element using images from the assets folder. Here is what I have implemented:
<template>
<div>
<div
v-for="(image, imageID) in images"
:key="imageID"
:style="bgImg(image)"
/>
</div>
</template>
<script>
export default {
data() {
return {
images: [
'~assets/img/image1.jpg',
'~assets/img/image2.jpg',
'~assets/img/image3.jpg',
'~assets/img/image4.jpg'
]
}
},
methods: {
bgImg(img) {
return `background-image: url(${img})`
}
}
}
</script>
Expected outcome
The div should be displayed with dynamic background images.
Current outcome
The background image is not being displayed. However, if I use the static asset path in the CSS file, it works fine.
What is the correct way to pass the path for the background image to display correctly?