Vue 3 + Vite image URL becomes undefined after build
Full error message
I encountered a bug where I dynamically generated a URL from props for image import in my Vue 3 component and it becomes undefined after build
Script used to generate URL and the tag in Vue Component
const imagePath = computed(() => { return new URL(`../assets/${props.imgPath}.png`,
import.meta.url).href
<img :src="imagePath" />
Undefined URL after build
<img class="img" src="http://localhost:4173/undefined />
Only two out of the many images are undefined after build which makes it very hard to pin down the problem
I tried messing around with vite.config.ts, particularly assetInlineLimit under the build section but so far nothing worksSolutionsource: stackoverflow \u2197
I am a bit late. But for anyone still having this problem, Similar to OP, this will not work. It will return undefined. (http://localhost:5173/src/assets/icons/undefined) const src = computed(() => { return new URL(`@/assets/icons/${props.src}`, import.meta.url); }); Simply move the template literals into a variable. And everything should work now. const src = computed(() => { const path = new URL('@/assets/icons/', import.meta.url); return `${path}/${props.src}` }); Apparently, new URL does not work well with template literals. there's multiple bug report on this, and might be fixed in the future. I am using vite 4.0 as of writing this post.
API access
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/753467497dd7db61db819b8736ed29c4ea10ef6566e5f531685d0471baae4637hash \u00b7 753467497dd7db61db819b8736ed29c4ea10ef6566e5f531685d0471baae4637