vite(批量)导入图片url变base64编码导致图标不显示的bug

批量导入可参考
vue3 批量引入本地资源图片 和 vue3+vite 批量引入图片文件

<script setup lang="ts">
import.meta.glob("@/assets/images/*.*", { eager: true }); //导入的图标部分显示,部分不显示
</script>

解决方法(问题来源)

官方配置的小于 4kb 的图片,导入时会默认内联将图片解析为 base64 编码,造成批量导入的部分图标不显示。

export default defineConfig({
  //...
  build: {
    assetsInlineLimit: 0, //默认:4096 (4 KiB)小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。
  },
  //...
});

转载自本人github文章 vite(批量)导入图片url变base64导致图标失效的bug