最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Dynamic assets in Nuxtvite - Stack Overflow

programmeradmin0浏览0评论

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?

Share Improve this question edited Nov 20, 2021 at 21:15 tony19 139k23 gold badges277 silver badges347 bronze badges asked Nov 4, 2021 at 10:19 Endre SzabóEndre Szabó 5844 silver badges10 bronze badges 3
  • 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
Add a ment  | 

1 Answer 1

Reset to default 9

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

发布评论

评论列表(0)

  1. 暂无评论