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

Question

我为 Vite 配置了别名 "@" 作为 "./src"。

直接使用别名<img>.src即可：

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

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

<!-- 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>

demo

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

Vite: img src alias not working when passing as component props

vue.js

vuejs3

vite