Using import.meta.glob() to import from dynamic folder URL [closed]

1 day ago 1
ARTICLE AD BOX

I have a product images folder containing sub-folders where the name of the sub-folder is equal to my product Id.

Using import.meta.glob() requires a static directory, but had tried to get around this using wildcards.

So it was:

import.meta.glob("/products/**/*.{png,jpg,jpeg}", {eager:true})

Instead of:

import.meta.glob("/products/"+product.id+"/*.{png,jpg,jpeg}", {eager:true})

I then created a function to filter the entire list of product images that contained my id, like so:

let filteredImages = []; const images = import.meta.glob("/products/**/*.{png,jpg,jpeg}", {eager:true}); for(let i = 0; i < Object.keys(images).length; i++){ if(images[Object.keys(images)[i]].default.includes(product.id)){ filteredImages.push(images[Object.keys(images)[i]].default); } } console.log(filteredImages);

This worked with a sample data set but with thousands of products with multiple pictures each it immediately crashes.

Is there a better way to get images from a dynamic folder?

Read Entire Article