I encountered a bug where I dynamically generated a URL from props for image import in my Vue 3 ponent and it bees undefined after build

• Script used to generate URL and the tag in Vue Component

const imagePath = puted(() => { 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 works

I encountered a bug where I dynamically generated a URL from props for image import in my Vue 3 ponent and it bees undefined after build

• Script used to generate URL and the tag in Vue Component

const imagePath = puted(() => { 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 works

• javascript
• vue.js
• bundler
• vite
• esbuild

• Could you try <img :src="require(`../assets/${props.imgPath}.png`)" /> – Utku Demir Commented Apr 3, 2022 at 18:09

4 Answers 4

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 = puted(() => {
    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 = puted(() => {
    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.

I was having the same issue and found that you need to set the build target to 'es2020' since import.meta.url is not defined in the default build target. There is a small note at the bottom of this page: https://vitejs.dev/guide/assets.html

I faced same problem, solution in my case, the image name must be like props name because it's case sensitive so I changed image name from "myimage.png" to "myiMage.png"

I Found one simple solution to use this with the help of core javascript concept.

To access env. variable you need to define with VITE_ prefix (for ex: VITE_APP_VERSION ) And then in vite.config.ts define config

define: {
'process.env': env,
global: 'window'
},

then in any util file you can directly use process.env.VITE_APP_VERSION

For accessing images in the assets folder, the traditional require() method is not supported in Vite. Instead, you should use the import.meta.url with the URL class. However, a more efficient approach is to create a utility file for managing images. This allows you to import images directly and use them throughout your project.

import imageName from '@/assets/your_image_name';
export class ImageUtil {
static imageName
}

and then use in any file like this

import { ImageUtil } from './ImageUtil';
const myImage = ImageUtil.imageName;

Hope it is helpful