How to import dynamic paths with Vite's new URL(url, import.meta.url)?

[imShara]

Hello. I'm trying to use it with latest Vite with this construction:

const image = new URL(`/data/articles/${id}/picture.jpg?width=100`, import.meta.url).href
...
<img :src="image">

More about this construction

But image variable is undefined. What I miss? Should it works? Possible simmilar to #321

[RodrigoSosa96]

I am having the same problem, I have my imgs in a json to import them dynamically.

if there is no solution for this, there is no way to import a folder of pictures and transform them?

[chojnicki]

@JonasKruckenberg could you maybe look at this? Would be great, because it's pretty important feature in Vite right now.

This works, and is also transformed by imagetools:

const demo = (x) => new URL(`/src/assets/images/demo/${x}.jpg`, import.meta.url).href

This does not:

const demo = (x) => new URL(`/src/assets/images/demo/${x}.jpg?w=100`, import.meta.url).href

[benmccann]

I am having the same problem, I have my imgs in a json to import them dynamically.

Please note from the Vite docs that "the URL string must be static so it can be analyzed"

if there is no solution for this, there is no way to import a folder of pictures and transform them?

You can import a folder of pictures and transform them with import.meta.glob. I just added it to the docs and example

[benmccann]

@chojnicki this is a bug in Vite. I can reproduce this without imagetools being involved. I filed an issue here: vitejs/vite#13017

[benmccann]

I wanted to mention that I haven't found much of a use case for this feature yet.

To use an example, let's assume you've got something like in the issue description:

const image = new URL(`/data/articles/${id}/picture.jpg?width=100`, import.meta.url).href

You could also accomplish that by simply doing a relative import from the article page. You can also use import.meta.glob to build a list of all the matching images which you dynamically select from. I think if you really really needed to dynamically select just a single image and could afford to build a list of all the images you could probably do something like import.meta.glob in an API endpoint (+server.js for SvelteKit users) so that you only hold the list on the server.

If the article and image are coming from a dynamic source like a CMS then you're probably not going to be using new URL(url, import.meta.url) anyway.

I'd love to know if there's some use case that I'm overlooking.

[benmccann]

The fix for this will be in the next version of Vite: vitejs/vite#13034

[chojnicki]

@benmccann Thanks for handling vite issue so well. Will check that when new vite stable version will be released.

About use case - it's very simple. I was using import.meta.glob for a long time, but is has one important "issue". It will not give you file names, but full paths to files as keys. Because of this, it harder to use such file in for example loops or any other scenario where file name comes from variable. Let's say I have photos of all flags (they should be svg's, but whatever), and want to display flag corresponding to user country. :src="flags[user.country]" - should be simple, but it's not. To do that you need to map that object first, and make keys as flag names. Easy, few lines of code, but it's boilerplate you need to use in every place you need that, which is pain in the ass. You cannot easily extract that import.meta.glob logic elsewhere, because glob path of course cannot be variable.

[benmccann]

Closing as fixed in Vite 5