如何使用Pinia渲染动态图片？路径绑定失效问题排查

问题根源 #

硬编码src="../assets/xxx.PNG"时，Vue（准确说是Vite）会在编译阶段自动把相对路径转换成打包后的资源URL；但动态绑定字符串路径时，编译工具无法识别这是资源路径，会直接把字符串原样传给浏览器，导致浏览器找不到文件。

解决方法 #

方法一：用new URL()动态生成资源路径 #

在Pinia里直接把路径转换成正确的资源URL：

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: new URL('../assets/profile.PNG', import.meta.url).href
  },  
  {
    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: new URL('../assets/armsOpen.PNG', import.meta.url).href
  }
]

// 后续store代码保持不变
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 };
  });

这样存储的就是打包后能被浏览器识别的完整资源路径，组件里直接绑定:src="pageStore.getPage.photo"即可正常显示。

方法二：导入图片资源后存储 #

先把图片作为模块导入，再把导入后的变量存入Pinia：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
// 导入图片资源
import profileImg from '../assets/profile.PNG'
import armsOpenImg from '../assets/armsOpen.PNG'

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: profileImg
  },  
  {
    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: armsOpenImg
  }
]

// 后续store代码保持不变
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 };
  });

组件里的绑定逻辑不需要修改，依然用:src="pageStore.getPage.photo"即可。

两种方法都能解决问题，方法二更符合Vite的资源处理规范，方法一适合路径较多或需要动态生成路径的场景。

内容的提问来源于stack exchange，提问作者s3mi0tics