如何用JS实现从图片文件夹随机取图，无需手动逐个录入图片URL到数组

解决方案 #

方案1：统一命名规则批量生成（无需后端，实现成本最低） #

如果可以将所有图片按固定规则命名（比如1.png、2.png…N.png），并统一存放在站点的同一个文件夹下，直接在前端用代码批量生成图片URL数组即可，无需手动逐个录入：

// 按需修改下面两个配置项即可
const TOTAL_IMAGE_COUNT = 200; // 你的图片总数量
const IMAGE_FOLDER_PATH = "./nft-images/"; // 图片存放的站点相对路径

// 自动生成全部图片地址数组
const ImageArray = Array.from({length: TOTAL_IMAGE_COUNT}, (_, index) => {
    return `${IMAGE_FOLDER_PATH}${index + 1}.png`
});

function getRandomImage() {
    // 直接用数组长度计算随机数，后续加图片只需要改TOTAL_IMAGE_COUNT就行
    const randomIndex = Math.floor(Math.random() * ImageArray.length);
    const imgUrl = ImageArray[randomIndex];
    document.getElementById("randImage").innerHTML = `<img src="${imgUrl}" width="300px">`
}

后续新增图片只要按序号接着命名，只需要修改TOTAL_IMAGE_COUNT的数值即可，不用改其他代码。

方案2：服务端扫描文件夹（适配任意图片命名） #

纯前端JS没有权限直接读取服务器文件夹的文件列表，所以可以用服务端脚本扫描文件夹生成图片列表。你的主机支持PHP，直接用PHP实现即可：

1. 在图片存储文件夹下新建list-images.php文件，写入以下代码：

<?php
header("Content-Type: application/json");
// 配置允许的图片后缀
$allowedExt = ['png', 'jpg', 'jpeg', 'webp', 'gif'];
// 扫描当前文件夹下的所有文件
$imageList = [];
foreach (scandir(__DIR__) as $fileName) {
    $ext = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
    if (in_array($ext, $allowedExt)) {
        $imageList[] = $fileName;
    }
}
echo json_encode($imageList);
?>

2. 修改前端代码，页面加载时自动拉取图片列表：

let ImageArray = [];
const IMAGE_FOLDER_PATH = "./nft-images/";

// 页面加载时拉取图片列表
async function initImageList() {
    try {
        const resp = await fetch(`${IMAGE_FOLDER_PATH}list-images.php`);
        const fileNames = await resp.json();
        ImageArray = fileNames.map(name => `${IMAGE_FOLDER_PATH}${name}`);
    } catch (e) {
        console.error("图片列表加载失败", e);
    }
}

function getRandomImage() {
    if (!ImageArray.length) return;
    const randomIndex = Math.floor(Math.random() * ImageArray.length);
    const imgUrl = ImageArray[randomIndex];
    document.getElementById("randImage").innerHTML = `<img src="${imgUrl}" width="300px">`
}

window.onload = initImageList;

后续新增图片直接上传到对应文件夹即可，不需要修改任何代码。

原有页面中的按钮和randImage容器HTML代码不需要修改，直接替换对应的JS逻辑即可。

内容的提问来源于stack exchange，提问作者Al the Walrus