Currently, I am in the process of developing a card carousel that features a Spotify-style thumbnail with an image as the background and text overlaid on top. The content for this carousel is stored in a Pinia store, which will eventually be connected to Firebase. However, while attempting to set the image background, I encountered the following error:
GET http://127.0.0.1:5173/%60$%7B%7Bcontent.image%7D%7D%60 404 (Not Found)Below is a condensed version of my store code where the important bits are highlighted:
export const useContentStore = defineStore('contentStore', {
state: () => {
return {
guides: [{
title: 'XX',
date: 'X',
description: "X",
image: './assets/images/content/thumbnail.png',
id: '1',
}]
}
}
})
This is where I attempt to access the 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>
Here's 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>
I suspect the issue lies in transferring the string through the store to the template, but I'm unsure how to resolve it. I've attempted escaping characters, using template literals on both the stored path and the image tag, experimented with URL() function, and confirmed that the image path itself is correct (as it works when plugged directly into the image tag). Any assistance would be greatly appreciated!