如何使用pinia渲染动态图像？

Question

我正在尝试使用 pinia 存储在我的工作区中创建文件的路径。当我使用 pinia 商店尝试将该路径添加到模板中的 :source 属性时，浏览器输出为作为源的文字字符串，而不是项目中文件的路径。当我将字符串硬编码到模板的 :source 属性中时，它就可以工作了。

这是我的pinia商店：

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 };
  });

这是我的图像组件：

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

我期待出现图像，但得到的是损坏的图像。 devtools中的元素如下：

图像的来源是文件，它只是前端的一个字符串。但是，如果我按如下方式对图像组件进行硬编码，它就会起作用：

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

Answer 1

我在这里找到了问题的解决方案：

Vite / Vue 3：使用图像源作为 props 时“require is not Define”

问题是我将 require() 与 vite 一起使用，而 vite 不允许这样做