坑!原来 import.meta.glob 打包后图片格式会变的!

26 阅读1分钟

问题: 通过如下方式动态引入图片, 打包后图片没有显示

export const allImage = import.meta.glob('@/assets/image/mipmap/*', { eager: true })

const initCountryCache = () => {
  const regex = /flag_([a-zA-Z0-9]+)(?=\.png$)/
  Object.values(allImage).map((v: any) => {
    const match = v.default.match(regex)
    if (match) {
      xxx.value[match[1]] = v.default
    }
  })
}
// 最终想构建一个 [{xx: 图片地址},...] 格式的响应式数组

原因:

这是vite提供的动态导入的方式,vite不特殊配置的话,会将一些图片转为data:image 的形式,所以上面代码根据value当key值的行为是错误的