Vite：作为组件道具传递时，img src 别名不起作用

Question

我已将 Vite 配置为"@"别名"./src"。

直接使用别名就<img>.src可以了：

<!-- this is ok -->
<img src="@/assets/icon-1.svg">

但将src作为 prop 传递是行不通的：

<!-- ComponentA -->
<template>
  <img :src="imgSrc">
</template>

<!-- Parent Component: alias not resolved as expected; imgSrcWithAlias is "@/assets/icon-1.svg"  -->
<component-a :img-src="imgSrcWithAlias" />

传递 props 时是否有使用文件路径别名的解决方案？

Answer 1

资产 URL 必须在脚本中使用关键字手动解析import：

<script setup>
import imgSrcWithAlias from '@/assets/icon-1.svg'
</script>

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

演示