How can I use pinia to render dynamic images?

Question

I am trying and use the pinia store to create a path to a file in my workspace. When I use the pinia store to try to add that path to my :source property in my template the browser outputs as the literal string being the source rather than the path to the file in my project. When I hard code the string into my :source property of my template, it works.

Here is my pinia store:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'


const pages = [
  {
    id: 'home',
    subtitle: 'software engineer',
    title: 'full-stack',
    name: 'colby kauk',
    paragraph: 'Crafting dynamic, scalable, and elegant designs to enhance your experience',
    photo: '../assets/profile.PNG'
  },  
  {
    id: 'biography',
    subtitle: 'programmer',
    title: 'biography',
    name: 'colby kauk',
    paragraph: 'I am a determined full-stack developer proficient in Python, Java, React, mySQL, and mongoDB. Gritty and diligent engineer focused on growth, with a  willingness to learn and a curiosity to gain a deeper understanding of technologies. Skilled problem solver able to self-manage during independent projects and collaborate in a team setting. ',
    photo: '../assets/armsOpen.PNG'
  }
  
]


export const usePagesStore = defineStore('pages', () => {
  const page = ref(pages[0])
  const index = ref(0) 
  const lastPage = pages.length - 1
  const getPage = computed(() => page.value)
  const getIndex = computed(() => index.value)
  function changePageById(id) {
    page.value = pages.find(page => page.id === id) || pages[0];
    index.value = pages.findIndex(page => page.id === id)
  }

  function nextPage(id) {
    console.log(index.value)
    let i = pages.findIndex(page => page.id === id)
    i ++
    index.value = (i < 0) ? 0 : (i > lastPage) ? lastPage : i;
    page.value = pages[index.value] || pages[0]
  }

  function previousPage(id) {
    console.log(index.value)
    let i = pages.findIndex(page => page.id === id)
    i --
    index.value = (i < 0) ? 0 : (i > lastPage) ? lastPage : i;
    page.value = pages[index.value] || pages[0]
  }
  
    return { page, index, lastPage, getPage, getIndex, changePageById, nextPage, previousPage };
  });

here is my image component:

<script setup>
import { usePagesStore } from '@/stores/pagesStore';
const pageStore = usePagesStore()
</script>

<template>
        <img class="flip-horizontal" :src="pageStore.getPage.photo" alt="face profile" />
</template>


<style lang="scss" scoped>
.flip-horizontal {
    transform: scaleX(-1);
    height: 86%;
    position: absolute;
    left: 15%;
    bottom: 0px;

}
</style> 

Im expecting an image to appear but instead am getting a broken image. The element in the devtools is as follows:

rather then the source of the image being the file it is just a string on the front end. however it works if I hard code the image component as follows:

...
<template>
        <img class="flip-horizontal" src="../assets/profile.PNG" alt="face profile" />
</template>
...

Answer 1

I found the solution to my problem here:

Vite / Vue 3 : "require is not defined" when using image source as props

the problem was that I was using require() with vite, and vite doesn't allow for that