vite动态导入图片

方式一：

使用 import.meta.glob 方法，但是默认导出的是懒加载的异步模块。

const modules = import.meta.glob('./dir/*.js')
// 编译后变成
const modules = { 
    './dir/foo.js': () => import('./dir/foo.js'), 
    './dir/bar.js': () => import('./dir/bar.js'), 
}

使用选项 { eager: true } 导出全部静态资源

const modules = import.meta.glob('../assets/images/**/*.{png,svg,jpg,jpeg}', { eager: true })
// 编译后变成
const modules={
    '../assets/img/enterpriseAssets/bill-status1.png':{
        default:"/manager/src/assets/img/enterpriseAssets/bill-status1.png"
    },
    '../assets/img/enterpriseAssets/bill-status1.png':{
        default:"/manager/src/assets/img/enterpriseAssets/bill-status2.png"
    }
}
// 所以在 src 中传入 defalult 
<img src="/manager/src/assets/img/enterpriseAssets/bill-status2.png"/>
// 相当于 
<img src="http://localhost:5173/manager/src/assets/img/enterpriseAssets/bill-status2.png"/>   

另外 import.meta.glob 不支持使用变量，包括模板字符串，所以方案只能是通过规则匹配拿到所有静态资源，然后从这些资源中取出需要的

export const getImageUrlByVite = (url, suffix = 'png') => {
  const path = `../assets/images/${url}.${suffix}`
  const modules = import.meta.glob('../assets/images/**/*.{png,svg,jpg,jpeg}', { eager: true })
  return modules[path].default
}

方式二：

注意：new URL 不支持完全的变量，因为 vite 不知道要打包哪个路径下文件，所以一直到文件夹的路径都必须写全。

export const importImageUrl = (url, suffix = 'png') => {
  return new URL(`../assets/images/message/${url}.${suffix}`, import.meta.url).href;
}

// 这样是可以的，因为路径完整
export const importImageUrl = (path ,url, suffix = 'png') => {
  return new URL(`../assets/images/${path}/${url}.${suffix}`, import.meta.url).href;
}
// 这样是不可以的，因为路径初始解析的时候匹配不到具体哪个文件（images/ 路径后面部分）
export const importImageUrl = (path ,url, suffix = 'png') => {
  return new URL(`../assets/images/${path+'/'}${url}.${suffix}`, import.meta.url).href;
}