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: { img: string, select: string} = {
      img: '',
      select: ''
    }
    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: { img: string, select: string} = {
      img: '',
      select: ''
    }
    import('./image' + item.path).then((res) => {
      obj.img = res.default
    })
    imgUrl.push(obj)
  })
}

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

方法二

可以将此方法暴露，需要动态使用图片的时候使用这个方法

import { ElMessage } from 'element-plus'

/**
 * 获取文件
 * @param url: string
 * examples /src/assets/img/xxx.png
 */
export default function useFileHome(url: string) {
  const modules = import.meta.globEager('/src/**/*.{png,svg,jpg,jpeg}')
  if (modules[url]) return modules[url].default
  else {
    ElMessage({
      message: 'Error url is wrong path',
      type: 'error',
      showClose: true
    })
    console.error('Error url is wrong path')
  }
}

Vue3 + vite动态引入图片

Vue3 + Vite 动态引入图片