I have a banner component in which I am passing the props for the image
title
and
the subtitle
. When I set the image prop as my background image URL, it does not work.
Here is my component
<template>
<div class="" :style="`background-image:url(${image})`">
<div class="content">
<span class="text-primary">{{ subTitle }}</span>
<h1 class=" text-grey-700 mt-px-18">{{ title }}</h1>
</div>
</div>
</template>
<script>
export default {
name: "SharedBanner",
props: ["title", "subTitle", "image"],
};
</script>
This is my parent component
<shared-banner
title="Listings"
subTitle="LOREM IPSUM"
image="assets/images/listingsBanner.png"
/>
I believe the issue has something to do with the image path. Is there a way to set dynamic image paths as props for the style object in Nuxt3?