Passing Background Image Path as Props not Working in Nuxt 3

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?