开发图片展示网站：如何在JavaScript中获取服务器目录文件名？

错误原因 #

require是Node.js专属的模块加载语法，浏览器环境没有内置这个功能，你直接在浏览器里运行这段Node.js代码必然会报错——而且浏览器出于安全限制，本身也不允许前端脚本直接读取本地文件系统。

解决方案 #

根据你的网站类型，选择对应的处理方式：

1. 纯静态前端网站

没法直接让浏览器读取本地./images文件夹，有两种替代方案：

• 预生成图片列表JSON：先在Node.js环境下运行代码生成包含文件名的JSON文件，再让前端加载这个文件。
  生成JSON的Node.js代码：

  const fs = require('fs');
  // 过滤出图片格式文件（可根据需要调整后缀）
  const imageFiles = fs.readdirSync('./images').filter(file => /\.(jpg|png|gif|webp)$/i.test(file));
  // 将列表写入JSON文件，放在前端能访问的目录（比如public下）
  fs.writeFileSync('./public/image-list.json', JSON.stringify(imageFiles));
  

  前端加载代码：

  fetch('/image-list.json')
    .then(response => response.json())
    .then(files => {
      // 在这里处理图片文件名列表
      console.log('图片文件名：', files);
    });
  

• 让用户选择文件夹（File System Access API）：借助浏览器的文件系统API，让用户手动选择图片所在文件夹，从而获取文件名。

  async function loadImageNames() {
    try {
      const dirHandle = await window.showDirectoryPicker();
      const imageNames = [];
      // 遍历文件夹中的文件
      for await (const entry of dirHandle.values()) {
        if (entry.kind === 'file' && /\.(jpg|png|gif|webp)$/i.test(entry.name)) {
          imageNames.push(entry.name);
        }
      }
      console.log('图片文件名：', imageNames);
      // 后续处理逻辑
    } catch (err) {
      console.error('操作取消或出错：', err);
    }
  }
  
  // 绑定按钮触发（需要用户主动交互，浏览器不允许自动调用）
  document.querySelector('#select-folder-btn').addEventListener('click', loadImageNames);
  

2. 使用前端构建工具（Webpack/Vite等）

如果你的项目用了构建工具，可以利用其模块扫描能力自动获取图片文件名：

• Vite环境：

  // 扫描images目录下的所有图片文件
  const imagePaths = import.meta.glob('./images/*', { eager: false });
  // 提取文件名
  const imageNames = Object.keys(imagePaths).map(path => path.split('/').pop());
  console.log('图片文件名：', imageNames);
  

• Webpack环境：

  // 创建上下文，扫描images目录下的图片文件
  const imageContext = require.context('./images', false, /\.(jpg|png|gif|webp)$/);
  // 提取文件名
  const imageNames = imageContext.keys().map(key => key.split('/').pop());
  console.log('图片文件名：', imageNames);
  

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