Vite中图片src路径别名作为组件props传递时不生效如何解决？

问题原因 #

Vite的路径别名仅在编译阶段对静态代码字符串生效：直接写在<img src>里的静态路径会被Vite内置的资源处理器自动识别、替换别名并处理为正确的资源地址；而通过props传递的动态路径属于运行时变量，编译阶段Vite无法提前识别解析，因此别名不会被转换。

可行解决方案 #

• 方案1：提前导入资源后传递（最推荐，适用于固定路径场景）
  直接在父组件中通过ES模块导入的方式引入图片，Vite会自动处理导入路径的别名，将导入结果传给子组件即可。
  代码示例：

<!-- 父组件 -->
<script setup>
// 导入时别名会被正常解析
import icon1 from '@/assets/icon-1.svg'
const imgSrcWithAlias = icon1
</script>

<template>
  <component-a :img-src="imgSrcWithAlias" />
</template>

• 方案2：使用new URL()动态解析（适合需要动态拼接路径的场景）
  Vite原生支持new URL(相对路径, import.meta.url)语法，编译阶段会自动处理路径别名，生成正确的资源地址，可以在子组件统一做解析逻辑，也可以在父组件处理后传递。
  代码示例（子组件统一处理）：

<!-- ComponentA 子组件 -->
<script setup>
import { computed } from 'vue'
const props = defineProps(['imgSrc'])
// 统一解析别名路径
const resolvedImgSrc = computed(() => {
  return new URL(props.imgSrc.replace('@', '/src'), import.meta.url).href
})
</script>

<template>
  <img :src="resolvedImgSrc" />
</template>

• 方案3：批量导入资源（适合大量图片动态匹配的场景）
  如果需要动态匹配大量路径，可以使用import.meta.glob批量导入指定目录下的资源，后续根据路径匹配即可。
  代码示例：

<script setup>
// 批量导入src/assets下所有svg资源，eager设为true表示立即加载所有资源
const imageMap = import.meta.glob('@/assets/**/*.svg', { eager: true })
// 封装路径解析方法
const resolveImgPath = (path) => {
  const realPath = path.replace('@', '/src')
  return imageMap[realPath]?.default || ''
}

const imgSrcWithAlias = resolveImgPath('@/assets/icon-1.svg')
</script>

<template>
  <component-a :img-src="imgSrcWithAlias" />
</template>

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