如何在vue3+vite+ts中使用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、vue2中给图片动态设置src属性

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

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

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

你可能感兴趣的:(Vue3,Vue2,vue.js,typescript)