如何在Vite中批量导入整个图片文件夹？

方法1：使用Vite原生Glob导入（推荐） #

Vite内置支持glob导入语法，能直接匹配并批量导入文件夹下的所有图片，这是最简便的方案。

静态一次性导入（构建时解析所有图片） #

如果需要把目标文件夹下的所有图片（包括子文件夹）一次性导入，用下面的代码：

// 匹配assets文件夹下所有常见格式的图片，立即导入
const imageModules = import.meta.glob('./assets/**/*.{png,jpg,jpeg,gif,svg}', { eager: true })

• ./assets/**/*.{png,jpg,...}是文件匹配规则：**表示递归匹配所有子文件夹，{}用来枚举要匹配的图片格式
• { eager: true }表示构建时就把所有图片加载完成，返回的imageModules是一个对象，键是图片的相对路径，值是包含图片URL的模块对象

举个Vue组件里的使用例子：

<template>
  <div class="image-group">
    <!-- 遍历所有图片并渲染 -->
    <img 
      v-for="(module, path) in imageModules" 
      :key="path" 
      :src="module.default" 
      :alt="path.split('/').pop()"
    />
  </div>
</template>

<script setup>
// 导入src/assets下所有图片
const imageModules = import.meta.glob('./assets/**/*.{png,jpg,jpeg,gif,svg}', { eager: true })
</script>

动态按需导入（适合图片数量多的场景） #

如果图片太多，不想一次性加载全部，可以去掉eager: true，按需加载指定图片：

// 仅定义匹配规则，不立即导入
const imageLoaders = import.meta.glob('./assets/**/*.{png,jpg,jpeg,gif,svg}')

// 按需加载某张图片的函数
async function getImageUrl(imagePath) {
  const module = await imageLoaders[imagePath]()
  return module.default
}

// 示例：加载assets/logo.png
getImageUrl('./assets/logo.png').then(url => {
  console.log('图片URL:', url)
})

方法2：自定义Vite插件（特殊场景用） #

如果glob导入满足不了你的定制需求，可以写一个简单的Vite插件批量处理图片导入。不过一般情况下glob导入完全够用，这里只给个思路：

// vite.config.js
import fs from 'fs'
import path from 'path'

export default {
  plugins: [
    {
      name: 'batch-import-images',
      transform(code, id) {
        // 当检测到特定标识时，替换为批量导入的代码
        if (id.includes('.js') && code.includes('__IMPORT_ALL_IMAGES__')) {
          const imageDir = path.resolve(__dirname, 'src/assets')
          const imagePaths = fs.readdirSync(imageDir).filter(file => 
            /\.(png|jpg|jpeg|gif|svg)$/.test(file)
          )
          // 生成导入代码
          const importCode = imagePaths.map(file => 
            `import ${file.split('.')[0]} from './assets/${file}'`
          ).join('\n')
          const exportCode = `export default { ${imagePaths.map(file => 
            `${file.split('.')[0]}: ${file.split('.')[0]}`
          ).join(', ')} }`
          return importCode + '\n' + exportCode
        }
      }
    }
  ]
}

然后在业务代码里写import images from '__IMPORT_ALL_IMAGES__'就能拿到所有图片的映射了。

注意事项 #

• 调整匹配路径时，要根据你的项目目录结构来，比如图片在src/assets/images下，路径就要写成./src/assets/images/**/*.{png,jpg,...}
• 你之前配置的图片优化插件（比如压缩、格式转换）会自动作用于批量导入的图片，不用额外配置
• 如果图片文件名包含特殊字符，确保匹配规则能正确识别，或者统一文件名格式

内容的提问来源于stack exchange，提问作者The Norman James