Image path to stored in Pinia not passing through to component

Question

I'm creating a card carousel with a Spotify style thumbnail, (image as background, text on top). Content is stored in a Pinia store which I will be hooking up to Firebase eventually. I'm trying to set the image background but am getting this error

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

Here is my store code (condensed to the important bits)

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

Here is where I am trying to access that image path

<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>

And here is where the cards are being called

<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>

My gut instinct is that it's an issue with transferring the string through the store to the template, but I don't have any clue how to fix it. I've tried escaping the characters, using template literals on both the stored path and the image tag, played with URL() a bit, and I'm pretty sure it's not an issue with the actual path of the image (it works when I plug the path directly into the image tag)

Thanks for any help you can give!

Answer 1

The src attribute on the img is set improperly. It should be

<img class="card-image" :src="content.image"/>