HTML页面中用JS读取目录文件遇require未定义错误，求解决方案

问题根源 #

你写的代码是Node.js专属的服务器端代码：

• fs是Node.js的文件系统模块，浏览器环境根本没有这个API，也不允许前端直接访问本地文件系统（安全限制）
• 你混淆了require.js和Node.js的require：前者是前端用来加载JS模块的工具，后者是Node.js的模块加载语法，浏览器里不支持Node的require，所以会报"require未定义"

可行解决方案 #

根据你的站点类型，选对应的方法：

1. 静态站点（无后端）

浏览器不能读本地目录，只能提前生成图片列表：

• 手动创建image-list.json文件，放在网站可访问的目录下，内容示例：

["photo1.jpg", "banner.png", "avatar.gif"]

• 在HTML里用fetch读取这个JSON，再处理：

<script>
fetch('./image-list.json')
  .then(response => response.json())
  .then(files => {
    console.log('图片数量：', files.length);
    console.log('图片列表：', files);
    // 在这里写调整网站内容的逻辑，比如动态生成图片轮播
  })
  .catch(error => console.error('读取失败：', error));
</script>

• 嫌手动维护麻烦？可以用Vite、Webpack这类构建工具，在打包时自动扫描图片目录生成这个JSON文件。

2. 有后端的站点（比如用Node.js做后端）

通过后端接口返回图片列表：

• 后端代码（Node.js+Express示例）：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 定义接口返回图片列表
app.get('/api/get-images', (req, res) => {
  const imageDir = path.join(__dirname, '../mydirectory/images');
  fs.readdir(imageDir, (err, files) => {
    if (err) {
      return res.status(500).send('读取目录失败');
    }
    // 过滤出图片文件（可选）
    const imageFiles = files.filter(file => /\.(jpg|jpeg|png|gif)$/i.test(file));
    res.json({
      count: imageFiles.length,
      list: imageFiles
    });
  });
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

• 前端HTML调用接口：

<script>
fetch('/api/get-images')
  .then(response => response.json())
  .then(data => {
    console.log('图片数量：', data.count);
    console.log('图片列表：', data.list);
    // 调整网站内容的逻辑
  })
  .catch(error => console.error('请求失败：', error));
</script>

关键提醒 #

浏览器出于安全策略，绝对不允许前端JS直接访问本地文件系统，这是无法绕过的限制，别再尝试在前端用Node.js的文件操作代码了。

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