Can this work with import.meta.glob?

[idank]

I have a "gallery" of images which gets loaded like so:

import.meta.glob<string>("@/assets/images/**", {
    eager: true,
    as: "url",
})

Is it possible to have the plugin process the images that get imported in this way? Thanks!

[ElMassimo]

In Vite 2 there was no way to pass "parameters" to glob imports.

However, in Vite 4, it's now possible to use as to provide the parameters, and this works as expected:

import type { ImageAttrs } from 'vite-plugin-image-presets'

const images = import.meta.glob<ImageAttrs[]>("@/assets/images/**", {
  eager: true,
  as: "preset=default", // use whatever preset you want
  import: 'default', // to simplify "unwrapping" the imports
})

[idank]

Thanks, that seemed to work. It doesn't quite fit my use case though.

The gallery I have is divided into categories. This is reflected in the filesystem as well, so each category is a sub-directory under /images, e.g. /images/wood, /images/plastic, etc. With the current import call I have, I can process the paths since I get them as is, and then build a mapping from category to image paths of that category.

The import with the preset returns different paths (obviously). Can you think of a way to solve this?

Thanks for all your work.

[ElMassimo]

When using glob imports, the keys of the returned value will match the "@/assets/images/**", so you should use that to "discover" the original path for each image, instead of relying on the output URL, which would be mangled at build time by Rollup regardless of whether you used presets or not.

Try the following, create a file inside @/assets/images/index.ts:

import type { ImageAttrs } from 'vite-plugin-image-presets'

const images = import.meta.glob<ImageAttrs[]>("./**/*.{jpg,png}", {
  eager: true,
  as: "preset=default", // use whatever preset you want
  import: 'default', // to simplify "unwrapping" the imports
})

Then, images will be a Record<string, ImageAttrs[]>, where each key is the file name, following the structure you provided to the glob, so all paths start with ./ and the directory, for example: ./wood/oak.png.

You can then categorize images by doing slice(2).split('/')[0] to take the category.

[idank]

Yeah that's what I was doing before, but for some reason I thought this stopped working when I added the preset. It works now, so sorry for the confusion and thanks again!