{"id":806,"hash":"753467497dd7db61db819b8736ed29c4ea10ef6566e5f531685d0471baae4637","pattern":"Vue 3 + Vite image URL becomes undefined after build","full_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\n\nScript used to generate URL and the tag in Vue Component\n\nconst imagePath = computed(() => { return new URL(`../assets/${props.imgPath}.png`,\n    import.meta.url).href\n\n<img :src=\"imagePath\" />\n\nUndefined URL after build\n<img class=\"img\" src=\"http://localhost:4173/undefined />\n\nOnly two out of the many images are undefined after build which makes it very hard to pin down the problem\n\nI tried messing around with vite.config.ts, particularly assetInlineLimit under the build section but so far nothing works","ecosystem":"npm","package_name":"vue.js","package_version":null,"solution":"I am a bit late. But for anyone still having this problem,\n\nSimilar to OP, this will not work.\n\nIt will return undefined. (http://localhost:5173/src/assets/icons/undefined)\n\nconst src = computed(() => {\n    return new URL(`@/assets/icons/${props.src}`, import.meta.url);\n});\n\nSimply move the template literals into a variable.\n\nAnd everything should work now.\n\nconst src = computed(() => {\n    const path = new URL('@/assets/icons/', import.meta.url);\n    return `${path}/${props.src}`\n});\n\nApparently, new URL does not work well with template literals.\n\nthere's multiple bug report on this, and might be fixed in the future.\n\nI am using vite 4.0 as of writing this post.","confidence":0.9,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/71728204/vue-3-vite-image-url-becomes-undefined-after-build","votes":4,"created_at":"2026-04-19T04:51:44.613683+00:00","updated_at":"2026-04-19T04:51:44.613683+00:00"}