Load images from a folder dynamically (?)

[Endre Szabo]

I can load images dynamically from a folder in Nuxt (+ webpack) simply with a method like:

getServiceIcon(iconName) {
    return require ('../../static/images/svg/services/' + iconName + '.svg');
  }

Then I moved to Vite, and Require is not defined here (using rollup). How can I solve this, with nuxt / vite? Any idea?
So I'd like to load all the SVG-s from the given folder somehow.

[Byron Ferguson]

I'm also looking for a good solution for this, I ran across the suggestion on SO

https://stackoverflow.com/questions/69837637/dynamic-assets-in-nuxt-vite

[mak33v]

Simply amazing. The dynamic import functionality is a basic thing that we use everywhere and all the time. Why is this such a problem in Vite? 2 days trying to solve this issue, information 0.

[Matthew]

Same problem here, I can't find a way to dynamically import SVG icons.
I might have an answer for you if you need to import components or images with a dynamic names:

1. Dynamic component import
   https://www.npmjs.com/package/vite-plugin-dynamic-import

2. Dynamic image path -> source

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

But still have no idea how to convert the dynamically imported icon from img to svg. This is ridiculous...