如何用JavaScript获取同级icons目录下图片名称数组且兼容浏览器？

浏览器出于安全沙箱限制，没有直接读取服务端目录下文件列表的原生能力，不存在和Node.js中fs模块对等的纯前端运行时方案，你可以根据自己的项目情况选择以下实现方式：

方案1：硬编码图标数组（最推荐，适合图标数量固定的场景） #

直接按照你需要的顺序把图标文件名写进数组即可，代码如下：

// 顺序按照你的要求：icons[0]对应Icon.png，icons[1]对应Icon.svg，以此类推
const icons = ["Icon.png", "Icon.svg", "Icon1.svg", "Icon2.svg"]

这种方式不需要额外的服务端改造，运行效率最高，也完全符合你的需求。

方案2：构建时自动扫描图标（适合图标频繁变动、使用构建工具的项目） #

如果你用Vite、Webpack等前端构建工具，可以在构建阶段扫描图标目录生成数组，不需要手动维护列表：
以Vite为例，代码如下：

// 扫描icons目录下所有文件
const iconFileList = import.meta.glob('./icons/*', { eager: true })
// 提取文件名，按你需要的顺序排序
const icons = Object.keys(iconFileList)
  .map(filePath => filePath.split('/').pop())
  .sort((a, b) => {
    // 自定义排序规则，确保png排在最前，svg按数字从小到大排列
    if (a.endsWith('.png')) return -1
    if (b.endsWith('.png')) return 1
    const aNum = +(a.match(/\d+/)?.[0] || 0)
    const bNum = +(b.match(/\d+/)?.[0] || 0)
    return aNum - bNum
  })

方案3：服务端提供接口返回文件列表（适合图标动态上传变化的场景） #

如果图标会在运行时动态增减，你可以在服务端新增一个简单的接口，读取icons目录的文件列表后返回JSON格式的数组，前端通过请求获取列表：

let icons = []
fetch('/api/getIconList')
  .then(res => res.json())
  .then(data => {
    icons = data
    // 依赖icons数组的逻辑写在这里
  })

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