如何在vue3+vite+ts中使用require_vue3 使用require

vue3+vite+ts中不能使用require

之前使用vue2，去动态设置图片src属性时，采用require，但是vue3+vite+ts中使用require，项目能够运行，但浏览器中报错require未定义，require使用失败，安装@types/node之后使用require也未成功。

HTML

<img :src="getAssetsImages(children.icon.type)" alt="" style="width: 35px;height: 35px;">
1

1、vue2中给图片动态设置src属性

// 动态获取图片
const getAssetsImages = (name) => {
  return require(`/src/common/images/menu/${name}.png`)
}
1
2
3
4

2、vue3+vite+ts可以采用如下方案代替

// 动态获取图片
const getAssetsImages = (name) => {
  return new URL(`/src/common/images/menu/${name}.png`, import.meta.url).href
}
1
2
3
4