javascript - Nuxt/vite 中的动态 Assets

Question

我可以简单地使用以下方法从 Nuxt (+ webpack) 中的文件夹动态加载图像:

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

我搬到了 Vite，和 require此处未定义(使用汇总)。我该如何解决这个问题，使用 nuxt/vite？任何想法？

Answer 1

您可以使用import()像这样:

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