从数组追加图片到HTML：为何首个代码片段无法运行？

以下是你提供的两段代码：

无法运行的代码（使用数组元素） #

const fs = require('fs');
const dir = fs.readdirSync('/Files/Изображение').filter(files => files.endsWith('.png'))

let imag = dir[0];

function createImgBlock() {
    const imgBlocks = document.createElement('img');
    imgBlocks.src = '/Files/Изображение/' + dir[0];
    document.body.append(imgBlocks);
}

可以运行的代码（直接指定文件名） #

const fs = require('fs');
const dir = fs.readdirSync('/Files/Изображение').filter(files => files.endsWith('.png'))

let imag = dir[0];

function createImgBlock() {
    const imgBlocks = document.createElement('img');
    imgBlocks.src = '/Files/Изображение/' + '1407916_900_600.png';
    document.body.append(imgBlocks);
}

核心原因及排查方向： #

• 浏览器环境不支持Node.js的fs模块：代码里的require('fs')和fs.readdirSync是Node.js专属的文件系统API，浏览器中无法运行，会直接报错。这导致第一段代码的dir数组未被正确初始化（可能是undefined或空数组），dir[0]取不到有效文件名，拼接后的图片路径无效，最终加载失败。而第二段代码中，虽然前面的fs代码也会报错，但createImgBlock函数直接使用了正确的文件名，路径有效，所以能正常创建图片元素。
• 数组元素为空或无效：如果是在Node.js/Electron这类混合环境运行，需检查dir数组是否为空——比如目标目录不存在、无访问权限，或目录下没有.png后缀的文件，都会导致dir[0]为undefined，拼接路径错误。而直接写的文件名是真实存在的，因此能正常加载。
• 文件名编码或格式问题：若dir数组中的文件名包含隐藏字符（如空格、换行符），或俄语字符拼接时出现编码异常，会导致最终路径与实际文件路径不匹配。手动输入的文件名格式正确，所以不存在该问题。

解决建议： #

1. 浏览器环境：放弃使用fs模块读取本地目录，改用前端可访问的静态资源路径，或通过文件上传组件让用户选择图片。
2. Node.js/Electron环境：先打印dir数组内容，确认是否正确获取文件名；检查目标目录的路径、权限是否正确；确保过滤条件（.endsWith('.png')）没有遗漏文件（比如大小写问题，.PNG后缀的文件会被过滤）。

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