基于FileSystem读取的文件数组动态创建<img>元素失败如何排查？

问题原因 #

• 核心报错原因：fs 是 Node.js 专属的服务端API，浏览器环境下的JavaScript没有权限直接读取本地文件系统目录，也不内置fs模块。你单独测试读取文件夹功能时应该是在Node.js环境运行的，直接把这段逻辑放到浏览器加载的script.js里会直接抛出未定义错误，后续生成img标签的逻辑自然不会执行。
• 冗余逻辑问题：addImage 函数中重复执行了imgContainer.appendChild(newDiv)，你已经在代码开头将newDiv插入到了容器中，每次调用插入图片时不需要重复插入父容器。

修复方案 #

方案1：使用前端构建工具批量导入（推荐） #

如果你的项目使用Vite、Webpack等构建工具，可以直接用构建工具的静态资源批量导入能力获取图片列表，无需调用fs：
以Vite为例，替换原有fs相关的代码即可：

// 批量导入images目录下的所有jpg文件
const imageModules = import.meta.glob('./images/*.jpg', { eager: true });
const imageArray = Object.values(imageModules).map(mod => mod.default);

imageArray.forEach(imgUrl => {
  addImage(imgUrl);
});

同时修改addImage函数，去掉冗余的append逻辑：

const addImage = (imgSource) => {
  const newImage = document.createElement("img");
  newImage.setAttribute("class", "face");
  newImage.src = imgSource;
  newDiv.appendChild(newImage);
};

方案2：静态硬编码图片列表 #

如果项目没有用构建工具，你可以手动把所有jpg的文件名整理成数组，替换fs读取的逻辑即可：

const imageArray = ["a.jpg", "b.jpg", "c.jpg"]; // 替换为你实际的图片文件名
imageArray.forEach(imageFile => addImage(imageFile));

方案3：Node.js预生成内容 #

如果你确实需要动态读取本地目录，可以写一个Node.js脚本提前扫描目录生成对应的img标签字符串，写入到HTML文件中，再在浏览器打开生成后的HTML。

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