Vue3/Quasar项目如何统一使用src/assets管理图片路径？

方法一：提前导入图片变量 #

直接在组件中导入src/assets下的图片，将导入后的变量存入循环数组，Vite会自动解析这些资源并打包：

<template>
  <div v-for="item in imageList" :key="item.id">
    <img :src="item.src" :alt="item.alt" />
  </div>
</template>

<script setup>
// 从src/assets导入图片，~assets是Quasar/Vite配置好的别名
import logo from '~assets/logo.png'
import banner from '~assets/banner.jpg'

const imageList = [
  { id: 1, src: logo, alt: '站点Logo' },
  { id: 2, src: banner, alt: '首页横幅' }
]
</script>

方法二：动态生成图片URL（适合批量/路径有规律的场景） #

如果图片数量较多，不想逐个导入，可以在数组中存储相对于src/assets的路径，然后通过Vite的new URL()动态解析路径，这样Vite会自动识别并处理src/assets中的资源：

<template>
  <div v-for="(path, idx) in imagePaths" :key="idx">
    <img :src="resolveImage(path)" :alt="`图片${idx + 1}`" />
  </div>
</template>

<script setup>
// 数组中存src/assets下的相对路径，比如images子目录下的文件
const imagePaths = [
  'images/product1.png',
  'images/product2.png',
  'images/product3.png'
]

// 动态解析路径，../assets对应src/assets，根据组件所在目录调整相对路径
const resolveImage = (relativePath) => {
  return new URL(`../assets/${relativePath}`, import.meta.url).href
}
</script>

原理说明 #

之前需要维护public/assets是因为：直接在数组中写字符串形式的路径（如'~assets/logo.png'）时，Vite无法将其识别为静态资源进行解析，会默认去public目录查找。而使用上述两种方法，Vite会将src/assets中的图片纳入打包流程，自动处理资源路径，因此不需要再维护public/assets目录。

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