Support import.meta.glob about imagetools HOT 9 CLOSED

I've already deleted my prototype using dynamic imports. Tomorrow I'll try to put together repo with imports that don't resolve so we can eventually raise it as an issue at Vite.

from imagetools.

@JonasKruckenberg I had a look at the Vite source code and found that when using the as parameter in the import options, this should theoretically be forwarded to the import statement, e.g.:

const images = import.meta.globEager("./*.jpg", {as: "w=250"});

Link to Vite source

However, this does not seem to work in practice, transforms are not applied.

from imagetools.

@palle-k I think you'd want to use query for that: https://vitejs.dev/guide/features.html#custom-queries

from imagetools.

I'll try to see if this is possible once #17 is properly working, at least on next.
I don't know how Vite behaves when glob importing so I can make no promises but I definitely doesn't seem complicated

from imagetools.

Alright, I've been digging around a bit in the vitejs source code and it seems that they are passing the full url to fast-glob, so importing your example ./images/*.jpg?width=200;400&format=webp;jpg&meta Vite will try to match files in the asset directory with the pattern *.jpg?width=200;400&format=webp;jpg&meta which will obviously not match anything.

So it seems like for now glob imports unfortunately don't work, no. :/

from imagetools.

Thanks for investigating the issue.

That sucks.. because in several occasions dynamic import(${url}.jpg?webp) could not be resolved which means I have to import every image manually meaning having for example 10 image import statements at the beginning of one file.

from imagetools.

Yeah that's very annoying yeah.
Can you share a situation in which the glob import doesn't resolve?
Maybe we can work around that somehow!
Maybe it'd be worth it to raise it as an issue over at the vite repo. I'll try to to this tomorrow if I have the time 👍🏻

from imagetools.

This I find is also a very good template: sveltejs/kit#241 (comment)

from imagetools.

I've added import.meta.glob to the docs and example to show how to use it

from imagetools.