Vite+Vue3项目v-for循环内q-carousel-slide动态图片渲染方案

Vite 构建时会对静态资源引用做静态分析，直接拼接动态相对路径字符串无法被识别，会导致图片加载404。针对从Pinia读取数据、循环拼接图片地址的场景，按以下方式实现即可：

方案1：图片存放在src/assets目录（推荐，支持构建压缩、哈希缓存） #

这个场景下用Vite原生支持的new URL()写法即可，注意必须保留固定的路径前缀，让Vite能定位到图片所在目录，构建时会自动把目录下所有匹配的资源纳入打包。

1. 模板部分给img-src做动态绑定，传入每个循环项对应的图片标识（即Pinia中存储的图片文件名/后缀部分）：

<template>
  <!-- 其余业务代码省略 -->
  <q-carousel-slide
    v-for="card in cardStore.cardList"
    :key="card.id"
    :img-src="getLocalImg(card.imgFileName)"
  >
    <!-- 卡片内按钮等原有内容保持不变 -->
  </q-carousel-slide>
</template>

2. 脚本部分实现图片地址解析方法，注意相对路径要和项目里的实际存储位置对应：

// 示例：当前组件文件在src/views目录、图片存放在src/assets/cardImgs目录
const getLocalImg = (fileName) => {
  return new URL(`../assets/cardImgs/${fileName}`, import.meta.url).href
}

注意事项 #

• 不要把整个图片路径做成全动态变量传入new URL，必须保留固定的目录前缀部分，否则Vite无法在构建阶段扫描到需要打包的图片资源
• 路径写相对当前组件文件的相对路径即可，import.meta.url会自动标识当前模块的地址，Vite构建时会替换成正确的产物路径

方案2：图片存放在public目录 #

如果图片放在项目根目录的public文件夹下、不需要经过构建压缩处理，直接拼接根绝对路径即可，不需要调用new URL：

<q-carousel-slide
  v-for="card in cardStore.cardList"
  :key="card.id"
  :img-src="`/card-imgs/${card.imgFileName}`"
>
  <!-- 卡片内容 -->
</q-carousel-slide>

public目录下的资源会被直接拷贝到构建产物的根目录，路径开头的/代表站点根路径，部署时如果不是部署在域名根路径，需要对应配置Vite的base参数。

特殊场景：图片为线上CDN地址 #

如果Pinia里存的是完整的http/https开头的线上图片地址，不需要额外处理，直接绑定到img-src属性上即可正常渲染。

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