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

【问题标题】：Vite: img src alias not working when passing as component propsVite: img src 别名在作为组件道具传递时不起作用
【发布时间】：2021-11-28 01:41:39
【问题描述】：

我已将 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时使用文件路径别名有什么解决办法吗？

【问题讨论】：

标签： vue.js vuejs3 vite

【解决方案1】：

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

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

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

demo

【讨论】：

谢谢！我还必须将 StackBlitz 演示中的 resolve 配置添加到我的 nuxt.config.js 以使其正常工作。