如何使用JavaScript加载文件夹中所有图片并展示到页面空div？

首先要明确：浏览器端JavaScript出于安全限制，无法直接访问服务器或本地的任意文件夹，所以你需要根据实际场景选择以下方案：

方案1：预生成图片列表（适合静态站点/服务器托管场景） #

如果你的图片是放在服务器的固定文件夹里，无法前端动态读取的话，可以提前用脚本生成图片名称的JSON文件，再在前端加载这个JSON来渲染图片。

步骤： #

1. 用Node.js写一个小脚本，遍历目标文件夹生成图片列表：

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

const imgDir = './images'; // 你的图片文件夹路径
const outputFile = './image-list.json';

// 读取文件夹里的图片文件（过滤常见图片格式）
const imgFiles = fs.readdirSync(imgDir).filter(file => {
  const ext = path.extname(file).toLowerCase();
  return ['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(ext);
});

// 写入JSON文件
fs.writeFileSync(outputFile, JSON.stringify(imgFiles));

2. 前端加载这个JSON文件，遍历创建图片元素：

<div id="image-container"></div>

<script>
async function loadImages() {
  const container = document.getElementById('image-container');
  try {
    // 加载预先生成的图片列表
    const response = await fetch('./image-list.json');
    const imgList = await response.json();

    // 遍历创建图片元素
    imgList.forEach(imgName => {
      const img = document.createElement('img');
      img.src = `./images/${imgName}`; // 图片的实际路径
      img.alt = imgName;
      // 可以添加样式或事件
      img.style.width = '200px';
      img.style.margin = '10px';
      container.appendChild(img);
    });
  } catch (err) {
    console.error('加载图片列表失败:', err);
  }
}

loadImages();
</script>

方案2：让用户选择本地文件夹（前端直接处理用户上传的图片） #

如果是需要用户上传本地文件夹里的图片来展示，可以用HTML5的webkitdirectory属性让用户选择文件夹，然后读取其中的图片文件：

<input type="file" id="folder-input" webkitdirectory multiple accept="image/*">
<div id="image-container"></div>

<script>
const folderInput = document.getElementById('folder-input');
const container = document.getElementById('image-container');

folderInput.addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  // 过滤图片文件
  const imageFiles = files.filter(file => file.type.startsWith('image/'));

  // 遍历创建图片元素
  imageFiles.forEach(file => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file); // 创建本地临时URL
    img.alt = file.name;
    img.style.width = '200px';
    img.style.margin = '10px';
    container.appendChild(img);

    // 图片加载完成后释放临时URL，避免内存泄漏
    img.onload = () => {
      URL.revokeObjectURL(img.src);
    };
  });
});
</script>

注意事项 #

• 方案1需要你有服务器端或本地构建的权限，提前生成图片列表；
• 方案2只能处理用户主动选择的文件夹，无法自动读取用户本地的任意文件夹；
• 两种方案都建议添加错误处理（比如图片加载失败的提示），提升用户体验。

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