如何在不手动输入 javascript 中的每个图像文件的情况下从文件夹中循环图像？ [复制]

Question

我想随机循环文件夹中存在的所有图像。目前我可以手动输入每张图片并显示出来。但我希望该函数能够从给定文件夹中单独显示图像。

JS

function rndmImg() {
        var qs = [
            {
            text: "1",
            img:  "/Images/1.png"
            },
            {
            text: "2",
            img:  "/Images/2.png",
            },
            {
            text: "3",
            img:  "/Images/3.png",
            },
            {
            text: "4",
            img:  "/Images/4.png",
            },
            {
            text: "5",
            img:  "/Images/5.png",
            },
        ];
        var q = qs[Math.floor(Math.random() * qs.length)];
        document.getElementById("q").innerHTML =
            '<p>' + q.text + '</p>' +
            '<img src="' + q.img + '">';
        }

HTML

<div id="quote"></div>
        <input class="Click me" style="float: left;" type="button" 
        value="Randomize" onclick="rndmImg()">

Answer 1

因此客户端 JavaScript，即使在本地服务器上运行，实际上也无法访问本地文件系统，因此典型的服务器端或命令行命令（如 readdir、cd ls 等）实际上并不存在于客户端侧JavaScript

话虽如此，如果它在某种服务器/某种静态 http 服务器上运行，您应该能够使用 XMLHttpRequest 获取主目录，或者获取、读取链接，然后再循环浏览图像等

事实上，如果不首先在某种服务器上运行，客户端 JavaScript 无法读取任何外部文件的字节，除非它是由用户选择的

因此，例如，如果您使用 pythons http_server 模块在端口 770 上运行本地静态服务器，那么要获取文件

fetch("http://localhost:770/Images")
.then(r=>r.text())
.then(r=>{
    var p=new DOMParser ()
    var s=p.parseFromString(r,"text/html")
    var links=Array.from(s.querySelectorAll("a"))
    var fileNames= links.map(x=>x.href)
})

（假设该目录中没有 index.html）

话虽如此，您的文件似乎都遵循递增一的模式。如果它们都遵循已知模式，则根本不需要服务器，您可以简单地在 JavaScript 中动态创建新的 Image 对象，并为每个对象设置一个 onload 函数和一个 onerror 函数，只添加那些没有错误，或者继续递归加载它们，除非其中一个有错误，当它有错误时，它会告诉你模式已被破坏，你不需要服务器

所以假设模式是名称加一，从 1.png 开始，那么你可以在每个元素中生成一个包含名称和图像对象本身的对象数组，像这样

makeObjectArray (1, "Images/", ".png", it=>{
    console.log(it)
})
function makeObjectArray(cur,start,end, done) {
     var ar=[]
    get1()
    function get1() {
        var im= new Image()
        im.src=start+ (cur++)+end
        im.onload=()=> (ar.push(im),get1())
        im.onerror=()=>done (ar)
    }
}