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

user_9092139 0
Viewed 1503

I have configured Vite with an alias "@" as "./src".

Using the alias directly as <img>.src is ok:

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

but passing the src as a prop is not working:

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

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

Is there any solution to use file path alias when passing props?

vite vuejs3 vue.js
1 Answers

Asset URLs must be manually resolved in script with the import keyword:

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

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

demo

user_62771510
Related