I have the problem that I have about 2400 images in my assets folder. The following structure:

/assets/images/items/<first 2 letters of imgname>/imagename.png

Of course, I don't need all of them all the time, so I want to dynamically load the images I need. I find out which ones need to be loaded via a fetch API, on average between 10-40.

Now I know that this can't be achieved with require('/assets/images/items/'+getImgName());.

But does it make sense to generate an index.js file with all the images, like this:

const imagesList = {
    item1: require('./src/assets/item1.png'),
    item2: require('./src/assets/item2.png)
}

which then contains all 2400+ images?

Or is there a better way? Besides, is it even a good idea to have such a large array?

I originally loaded it via a CDN, but since it's only 30MB in total, I thought it made more sense to have it locally.