Question

0

348

Views

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

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?

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-04-19T21:02:44.397Z

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

0

348

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

1 answers

0

Find remote jobs

Andres GPT