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

Question

我想随机循环文件夹中存在的所有图像。目前，我能够一张一张地手动输入每张图片并显示出来。但我希望该功能能够从给定的文件夹中自行显示图像。JSfunction 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)

    }

}