如何在Svelte中获取目录下所有文件及对应路径

根据你使用的场景不同，有两种成熟的实现方式，不需要额外安装第三方依赖：

方案1：Vite 静态资源批量导入（通用推荐，纯前端可用） #

不管是普通Vite+Svelte项目，还是SvelteKit的静态/服务端渲染项目，只要是用Vite做构建工具，都可以用Vite内置的import.meta.glob能力批量读取指定目录的图片，不需要服务端权限，构建时会自动处理资源路径、内容哈希，开发和生产环境都能正常运行。
示例代码：

<script>
  // 匹配目标目录下所有jpg/png/gif/webp格式图片，eager:true表示直接导入资源而非懒加载
  // 路径从项目根目录开始写，比如图片存放在src/assets/photos下就写对应路径
  const imageModules = import.meta.glob('/src/assets/photos/*.{jpg,png,gif,webp}', { eager: true })
  // 提取可直接使用的图片访问路径，组成需要的list数组
  let list = Object.values(imageModules).map(module => module.default)
</script>

<!-- 直接遍历渲染即可 -->
{#each list as imgPath}
  <img src={imgPath} alt="展示图片" />
{/each}

• 如果需要递归读取子文件夹内的所有图片，把匹配路径改成'/src/assets/photos/**/*.{jpg,png,gif,webp}'即可
• 注意：import.meta.glob的匹配路径必须是写死的静态字符串，不能用动态变量拼接，Vite需要在构建阶段静态分析出所有要导入的资源，动态路径会导致匹配失败。

方案2：SvelteKit 服务端读取本地文件（适合动态文件场景） #

如果你的图片存放在服务端本地目录（比如项目static目录、服务器自定义存储目录），需要动态读取，可以在服务端逻辑里用Node.js的fs模块读取文件列表，再拼接访问路径返回给前端。

注意：文件读取逻辑只能写在服务端代码（+page.server.js/ts、+layout.server.js/ts或者服务端接口）里，不能直接写在前端组件的script中，浏览器没有访问服务器文件系统的权限。

1. 先写服务端加载逻辑，比如图片存放在项目static/gallery目录下，在对应路由下创建+page.server.js：

import fs from 'fs/promises'
import path from 'path'

export async function load() {
  // 拼接图片存放目录的绝对路径
  const imageDirPath = path.join(process.cwd(), 'static/gallery')
  // 读取目录下所有文件
  const allFiles = await fs.readdir(imageDirPath)
  // 过滤出图片格式文件，拼接静态访问路径（static目录下的文件可以直接通过根路径访问）
  const list = allFiles
    .filter(file => /\.(jpg|png|gif|webp)$/i.test(file))
    .map(fileName => `/gallery/${fileName}`)

  return { list }
}

2. 再写页面对应的Svelte组件，接收服务端返回的列表直接渲染：

<script>
  // 接收服务端load函数返回的数据
  export let data
  let list = data.list
</script>

{#each list as imgPath}
  <img src={imgPath} alt="展示图片" />
{/each}

• 如果图片存放在static目录外的其他路径，需要额外配置静态资源映射，或者单独写接口返回文件流，不建议直接把非static目录的文件暴露到公网。

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