Issue with Using Vue.js for Image Paths with Variables

I’m encountering an issue when attempting to create a dynamic image path based on the props passed using Vue.js. I’ve tried creating variables with the images, using CSS variables, and changing the path to the public folder (which worked, but I need the images to be in the src folder for an optimization plugin). I’ve consulted the documentation, but I’m still facing difficulties.

Here’s a snippet of my code:

<script>
  export default {
    name: 'card',
    props: {
      product: String,
      text: String,
    },
    methods:{
      redirect(){
        this.$router.push(this.product)
      }
    }
  }
</script>

<template>
    <div @click="redirect()" class="card" :style="`background-image: url(/src/assets/images/${product}/cardImg.svg)`">
        <div class="card-text d-flex flex-column gap-3">
          <div class="d-flex align-items-center justify-content-between">
            <img :src="`/src/assets/images/${product}/${product}Logo.svg`" alt="Logo">
            <i class="bi bi-arrow-right"></i>
          </div>
          <p>{{text}}</p>
        </div>
    </div>

</template>

<style scoped>
 .card{
   max-width: 90%;
   width: 402px;
   height: 568px;
   background-size: cover;
   border-radius: 24px;
   padding: 2rem 1rem;
   background-repeat: no-repeat;
 }
 .card:hover{
   scale: 105%;
 }
 img{
   filter: brightness(100);
   height: 40px;
 }
 .bi-arrow-right {
   color: #ffffff;
   scale: 200%;
 }
 p{
   color: #FFFFFF;
 }
 .card-text{
   position: absolute;
   bottom: 0;
   width: 350px;
 }
</style>

What did you try and what were you expecting?

I’ve attempted the following approaches:

1. Created variables for the images and used them in the template.
2. Used CSS variables to dynamically set image paths.
3. Changed the image path to the public folder, but this isn’t optimal for an optimization plugin.

I was expecting that one of these approaches would successfully generate dynamic image paths based on the props passed to the Vue component. However, I’m still facing difficulties, and the paths are not resolving as expected. I consulted the documentation, but I couldn’t find a solution.