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');
}

I moved to Vite, and require is not defined here (using rollup). How can I solve this, with nuxt / vite? Any idea?

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');
}

I moved to Vite, and require is not defined here (using rollup). How can I solve this, with nuxt / vite? Any idea?

• javascript
• nuxt.js
• require
• vite

• 1 You're using Nuxt3? github./nuxt/framework/discussions/868 – kissu Commented Nov 4, 2021 at 10:32
• Nope, 2.15.8. Ty, looking into it tho. – Endre Szabó Commented Nov 4, 2021 at 10:38
• Then, you can maybe ask your question down in the related repo: github./nuxt/vite/issues?q=is%3Aissue+images+ – kissu Commented Nov 4, 2021 at 10:45

1 Answer 1

You can use import() like this:

const getServiceIcon = async iconName => {
  const module = await import(/* @vite-ignore */ `../../static/images/svg/services/${iconName}.svg`)
  return module.default.replace(/^\/@fs/, '')
}

demo 1: Vue 3 Composition API

demo 2: Vue 3 Options API

demo 3: Vue 2 Composition API

demo 4: Vue 2 Options API