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

实现思路 #

利用Astro的getStaticPaths静态路由生成能力，结合Node.js文件系统API，自动扫描图片分类文件夹、生成对应路由并加载文件夹内的图片。无需手动维护路由配置，新增分类仅需创建文件夹并放入图片即可。

具体实现代码 #

在pages/pictures/[collection].astro文件中写入以下代码：

---
import fs from 'fs/promises';
import path from 'path';

// 生成所有图片分类的静态路由
export async function getStaticPaths() {
  // 定位到public下的图片分类根目录
  const collectionsRoot = path.join(process.cwd(), 'public', 'img', 'collections');
  
  // 获取所有子文件夹（即分类名称）
  const dirents = await fs.readdir(collectionsRoot, { withFileTypes: true });
  const collectionNames = dirents
    .filter(dirent => dirent.isDirectory())
    .map(dirent => dirent.name);
  
  // 返回每个分类对应的路由参数
  return collectionNames.map(name => ({
    params: { collection: name },
  }));
}

// 获取当前路由对应的分类名称
const { collection } = Astro.params;

// 读取当前分类下的所有图片文件
const collectionDir = path.join(process.cwd(), 'public', 'img', 'collections', collection);
const allFiles = await fs.readdir(collectionDir);

// 过滤出有效图片文件（可根据需求添加更多格式）
const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'];
const imagePaths = allFiles
  .filter(file => validExtensions.includes(path.extname(file).toLowerCase()))
  .map(file => `/img/collections/${collection}/${file}`);
---

<!-- 渲染图片列表，可自定义样式 -->
<div class="picture-collection">
  {imagePaths.map(src => (
    <img 
      key={src} 
      src={src} 
      alt={`${collection} 分类图片`}
      loading="lazy"
    />
  ))}
</div>

使用方法 #

1. 目录结构：确保图片分类文件夹放在public/img/collections下，示例结构：

   public/
     img/
       collections/
         mixed-tecnique/
           img1.jpg
           img2.png
         graphite/
           sketch1.webp
         acrylic/
           painting1.jpeg
   

2. 新增分类：直接在collections目录下创建新文件夹并放入图片。开发模式下Astro会自动检测变化并生成新路由；生产环境只需重新构建项目即可生效。

注意事项 #

• 图片文件名建议使用小写字母、数字和连字符，避免空格或特殊字符导致路径异常。
• 可根据需求修改validExtensions数组，添加或移除支持的图片格式。
• 开发模式下，文件夹或图片的新增/删除会触发Astro自动刷新路由和内容，无需手动重启服务。

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