How to use vite-imagetools with import.meta.glob

[palle-k]

I am using vite-imagetools to optimize image assets at build time. imagetools uses URL query syntax in the import path to declare transforms:

import image from 'path/to/image.jpg?width=500&webp';

Is there a way how I can combine this with import.meta.glob / import.meta.globEager? Alternatively, is there another plugin that supports this?

• When I use the query parameters in the import URL directly, the glob will not match: import.meta.globEager('path/to/images/*.jpg?width=500&webp');
• Looking at the Vite source code, I saw that the as-parameter is appended to the import path. When I use the as-parameter in the import URL, the glob will match but the transforms will not be applied: import.meta.globEager('path/to/images/*.jpg', { as: 'width=500&webp' });

[sawyerclick]

I've had luck with this approach in Svelte. I usually have a component where this lives in the module context. I pass a prop into the component to access the image from the object. Images are compiled at run and build time

const pictures = import.meta.glob('$lib/assets/graphics/*.{jpg,jpeg,png}', {
  query: { format: 'webp;avif;jpg', width: '200;400;600;1200', picture: '' },
  import: 'default',
  eager: true
});

[taocode]

With vite-imagetools ^5.0.0, width in the query becomes w instead, etc... See vite-imagetools v5.0.0 CHANGELOG.