Vue3 + Vite 动态引入图片

开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错
require is not defind
查看vite官方网站

官方说明

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

那么问题来了 怎么动态的获取我想要的图片组呢？

查看import() 方法

webpack根据ES2015loader规范实现了用于动态加载的import()方法。

这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包。

那么开始 开心的尝试

场景：一个对象储存我各个图片地址信息，我希望动态的加载，于是：

const imgUrl = reactive<object[]>([])
const getImage = () => {
  mapElements.map((item) => {
    const obj = {}
    import(item.path).then((res) => {
      obj.img = res.default
    })
    imgUrl.push(obj)
  })
}

果不其然，挂掉了，浏览器表示，没有，啥都没有，没有鱼丸，也没有面。

浏览器会报404item.path 这个路径是无效的

想到字符串模版 想到字符串模版应该是可以的吧 ./image/${item.path}

这次编译器直接报错 期望是一个字符串 也就是说这种也不可以

开始查文档说明

webpack需要将所有import()的模块都进行单独打包，所以在工程打包阶段，webpack会进行依赖收集。

此时，webpack会找到所有import()的调用，将传入的参数处理成一个正则，其中所有的变量都会被.*所替换，然后查找所有匹配的包，将其做哦为package进行打包。所以说，真的会把所有包大包进来。

解决方法：静态化表达包所处的地址，最小化变量控制的区域。

const imgUrl = reactive<object[]>([])
const getImage = () => {
  mapElements.map((item) => {
    const obj = {}
    import('./image' + item.path).then((res) => {
      obj.img = res.default
    })
    imgUrl.push(obj)
  })
}

可以使用import('./image' + item.path)避免其他干扰