Dynamic import about imagetools

[urbantrout]

I am using this plugin and it works fine in development mode. But whenever I try to build via adapter-static the dynamic import fails. I think it has something to do with this limitation:

https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#imports-must-end-with-a-file-extension

As soon as I remove the query string from the dynamic import, the build succeeds. But without any transformations obviously…

[JonasKruckenberg]

The next branch is now publishing on npm under the tag 'next'.
You can check it out by running npm install --save-dev vite-imagetools@next

This issue is addressed in that release.

[AutomateAaron]

Perhaps some jank, but here's my workaround:

const images = import.meta.glob('../example/path/*.png', {
	query: { width: '100,200,300' },
	eager: true,
});

return {
	image: images[`../example/path/${myVar}.png`]?.default || null,
};

[kylesloper]

As soon as I remove the query string from the dynamic import, the build succeeds. But without any transformations obviously…

Currently fighting with this, did you find a workaround?

[JonasKruckenberg]

The answer is the famous "Yes! but..." 😄
Yes it works the way you proposed right out of the box, but there are a few caveats:

1. Glob import is very picky.
   Lets say you have an import like this: import(`assets/${id}.jpg`).
   Vite will try it's best to resolve the glob pattern and infer all possible values for id. It it is able to do so, then no problem, your import statement works like a charm, but in my experience this is not always the case.
   Vite seems to have some issues tracking the values through a lot of function calls and the like, so be careful.
   (See https://vitejs.dev/guide/features.html#glob-import for more info)

2. Avoid combinatory hell
   Let's say you use your function like you said: const img = imageLoader([100, 200, 300]) and you then call it with 4 images,
   a.jpg,b.jpg,c.jpg and d.jpg. Vite-imagetools now has to calculate 4 * 3 = 12 different images and this increases linearly with the number of images you import, so img is now a very expensive function to run.
   This may be irrelevant to you, because you know full well what you're importing, but just keep an eye out.
   (This turns extra crazy once you try to generate different output formats as well. For example the query ${id}?width=100,200,300&format=webp,avif will generate 6 images per input image. So 4 * 6 = 24 in the case above)

But all in all it's totally possible!

[yamiteru]

I see I've read a few things about vite and I stumbled upon glob import.

Is width=100,200,300&format=webp,avif just a pseudocode or can I import images like this? If yes it makes my image loader even simpler.

[JonasKruckenberg]

The comma separated syntax is new with v3 it does not work with the current version.
But you can check out the next branch if you're curious.
It does not have real docs yet and it may be broken, so beware of the bugs 😄

[yamiteru]

Huuu that's really cool! Thank you

[yamiteru]

So it looks my imageLoader falls exactly into the dynamic imports limitations https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations

This is also not possible:

const query = "format=webp&width=1920&metadata";
const imageDir = "../../../images";
const imageNames = [
	"01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"
];
const images = imageNames
	.map(fileName => import(`${imageDir}/${fileName}?${query}`));

Not even this:

const images = {
	"01.jpg": import(`${imageDir}/01.jpg?${query}`),
	"02.jpg": import(`${imageDir}/02.jpg?${query}`),
	"03.jpg": import(`${imageDir}/03.jpg?${query}`),
	"04.jpg": import(`${imageDir}/04.jpg?${query}`),
	"05.jpg": import(`${imageDir}/05.jpg?${query}`)
};

Only this works:

const images = {
	"01.jpg": import(`../../../images/01.jpg?${query}`),
	"02.jpg": import(`../../../images/02.jpg?${query}`),
	"03.jpg": import(`../../../images/03.jpg?${query}`),
	"04.jpg": import(`../../../images/04.jpg?${query}`),
	"05.jpg": import(`../../../images/05.jpg?${query}`)
};

[michaeloliverx]

Does it work when you create an alias for $images which maps to your images directory?

const images = {
	"01.jpg": import(`$images/01.jpg?${query}`),
	"02.jpg": import(`$images/02.jpg?${query}`),
	"03.jpg": import(`$images/03.jpg?${query}`),
	"04.jpg": import(`$images/04.jpg?${query}`),
	"05.jpg": import(`$images/05.jpg?${query}`)
};