Nuxt / vite 中的动态资产

Question

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

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

我搬到了Vite，require这里没有定义（使用rollup）。我该如何用 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/, '')
}

演示 1：Vue 3 组合 API

演示 2：Vue 3 选项 API

演示 3：Vue 2 组合 API

演示 4：Vue 2 选项 API