Estoy creando un carrusel de tarjetas con una miniatura de estilo Spotify (imagen como fondo, texto en la parte superior). El contenido se almacena en una tienda Pinia que eventualmente conectaré a Firebase. Estoy tratando de configurar el fondo de la imagen pero recibo este error

GET http://127.0.0.1:5173/%60$%7B%7Bcontent.image%7D%7D%60 404 (Not Found)

Aquí está el código de mi tienda (resumido en los bits importantes)

 export const useContentStore = defineStore('contentStore', { state: () => { return { guides: [{ title: 'XX', date: 'X', description: "X", image: './assets/images/content/thumbnail.png', id: '1', }] } } })

Aquí es donde estoy tratando de acceder a esa ruta de imagen

 <template> <div class="card"> <img class="card-image" src="{{content.image}}"/> <h1 class="title">{{content.title}}</h1> <h2 class="subtitle"></h2> </div> </template> <script setup> /* store */ import { useContentStore } from "@/stores/contentStore"; const contentStore = useContentStore(); /* props */ const props = defineProps({ content: { type: Object, required: true, }, }); </script>

Y aquí es donde se llaman las cartas

 <template> <div class="guides-container"> <h2 class="title">Guides</h2> <div class="guides-list"> <GeneralCard v-for="(content, index) in contentStore.guides" :key="content.id" :content="content" /> </div> </div> </template> <script setup> /* imports */ import GeneralCard from "@/components/GeneralCard.vue"; /* data */ const contentStore = useContentStore(); </script>

Mi instinto me dice que es un problema con la transferencia de la cadena a través de la tienda a la plantilla, pero no tengo ni idea de cómo solucionarlo. Intenté escapar de los caracteres, usando literales de plantilla tanto en la ruta almacenada como en la etiqueta de la imagen, jugué un poco con URL(), y estoy bastante seguro de que no es un problema con la ruta real de la imagen (funciona cuando Conecto la ruta directamente en la etiqueta de la imagen)

¡Gracias por cualquier ayuda que usted puede dar!