如何用JavaScript创建遍历data文件夹返回图片路径数组的函数

我需要编写一个JavaScript函数，遍历本地名为"data"的文件夹（该文件夹仅包含图片文件，后续会持续添加新图片），返回包含所有图片路径的数组。此前我使用的是直接返回远程URL数组的函数：

function _image_urls(){return(
    [
      "https://images.pexels.com/photos/4050284/pexels-photo-4050284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=600",
      "https://images.pexels.com/photos/2002719/pexels-photo-2002719.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&w=600",
      "https://images.pexels.com/photos/1983038/pexels-photo-1983038.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/1702624/pexels-photo-1702624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/3631430/pexels-photo-3631430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/161154/stained-glass-spiral-circle-pattern-161154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ]
    )}

我尝试了以下方法，但无法适配后续新增的图片，需要更合适的实现：

function _image_urls(){
  const image_folder = 'data';
  const image_extension = '.jpg';
  let image_urls = [];
  for (let i = 0; i < 10; i++) {
    let image_url = image_folder + i + image_extension;
    image_urls.push(image_url);
  }
  return image_urls;
}

解决方案 #

Node.js环境（服务器/本地脚本） #

Node.js可以通过内置的文件系统模块读取目录，自动识别所有图片文件：

const fs = require('fs/promises');
const path = require('path');

async function getImagePaths() {
  const imageFolder = 'data';
  // 定义需要识别的图片扩展名，可按需添加
  const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
  
  try {
    // 读取目录下所有文件
    const files = await fs.readdir(imageFolder);
    // 过滤图片文件并拼接完整路径
    return files
      .filter(file => validExtensions.includes(path.extname(file).toLowerCase()))
      .map(file => path.join(imageFolder, file));
  } catch (error) {
    console.error('读取图片目录出错:', error);
    return [];
  }
}

// 使用示例（async函数需通过await或.then调用）
// getImagePaths().then(paths => console.log('图片路径列表:', paths));

浏览器环境（前端网页） #

浏览器无法直接访问本地文件系统，需根据项目构建方式选择方案：

方案1：使用静态资源构建工具（Webpack/Vite）

通过构建工具的批量导入能力自动识别图片：

• Vite环境

function getImagePaths() {
  // 匹配data目录下所有图片文件，eager参数表示立即导入
  const imageModules = import.meta.glob('./data/*.{jpg,jpeg,png,gif,webp}', { eager: true });
  // 提取所有图片的路径
  return Object.keys(imageModules);
}

• Webpack环境

function getImagePaths() {
  // 创建上下文，匹配data目录下的图片文件
  const context = require.context('./data', false, /\.(jpg|jpeg|png|gif|webp)$/);
  // 返回所有匹配的文件路径
  return context.keys();
}

方案2：后端接口配合

如果前端无法通过构建工具处理，可由后端提供接口返回图片列表，前端通过请求获取：

async function getImagePaths() {
  try {
    // 请求后端接口获取图片路径列表
    const response = await fetch('/api/get-image-list');
    const imagePaths = await response.json();
    return imagePaths;
  } catch (error) {
    console.error('获取图片列表失败:', error);
    return [];
  }
}

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