如何在TypeScript中动态导入文件夹内的所有图片文件？

1. Vite 构建工具（Vue/React/原生JS通用） #

Vite 原生支持 import.meta.glob 批量导入，是最便捷的实现方式：

// 假设图片存放在 src/assets/images 文件夹下
const imageModules = import.meta.glob('../assets/images/**/*.{png,jpg,jpeg,gif,svg}', { eager: true })

// 整理为可直接使用的图片路径数组
const images = Object.values(imageModules).map(module => module.default)

• 说明：
  • **/*.{png,jpg,...} 是 glob 匹配规则，** 表示递归匹配子文件夹，大括号内列出需要匹配的图片格式
  • *eager: true* 表示立即导入所有文件，默认是懒加载模式（返回加载函数）
  • Vue 中使用示例：

    <div v-for="(img, index) in images" :key="index">
      <img :src="img" alt="图片资源">
    </div>
    

2. Webpack 构建工具（Vue/React/原生JS通用） #

Webpack 需通过 require.context 实现批量导入：

// 假设图片存放在 src/assets/images 文件夹下
const imageContext = require.context('../assets/images', true, /\.(png|jpg|jpeg|gif|svg)$/)

// 转换为图片路径数组
const images = imageContext.keys().map(key => imageContext(key))

• 说明：
  • require.context 的三个参数分别是：目标文件夹路径、是否递归查找子文件夹、匹配文件的正则表达式
  • React 中使用示例：

    {images.map((img, index) => (
      <img key={index} src={img} alt="图片资源" />
    ))}
    

3. 原生浏览器环境（无构建工具） #

纯静态前端项目无法直接读取本地文件夹，需通过后端接口中转：

• 步骤：
  1. 后端提供接口，返回目标文件夹内所有图片的文件名列表（如 ['pic1.png', 'pic2.jpg']）
  2. 前端获取列表后拼接基础路径生成可访问URL：

  const baseImageUrl = './assets/images/'
  fetch('/api/get-image-filenames')
    .then(res => res.json())
    .then(fileNames => {
      const images = fileNames.map(name => baseImageUrl + name)
      // 后续可将 images 数组用于展示或其他逻辑
    })
  

注意事项 #

• 确保匹配规则包含所有需要导入的图片格式，避免遗漏
• 构建工具环境下，注意文件夹路径是相对当前代码文件的路径
• 生产构建时，工具会自动处理图片的哈希命名、压缩等优化操作

内容的提问来源于stack exchange，提问作者Sebi