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?
- 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
Reset to default 9You 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