如何在不在 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=>{&nbsp; &nbsp; var p=new DOMParser ()&nbsp; &nbsp; var s=p.parseFromString(r,"text/html")&nbsp; &nbsp; var links=Array.from(s.querySelectorAll("a"))&nbsp; &nbsp; var fileNames= links.map(x=>x.href)})（假设该目录中没有 index.html）话虽如此，您的文件似乎都遵循递增一个的模式。如果它们都遵循一个已知的模式，你根本不需要服务器，你可以简单地在 JavaScript 中动态创建新的 Image 对象，并为每个对象设置一个 onload 函数和一个 onerror 函数，只添加没有的错误，或者继续递归加载它们，除非其中一个有错误，当它有错误时，它会告诉你模式已经被破坏，你不需要服务器所以假设模式是名称递增一个，从 1.png 开始，那么你可以在每个元素中生成一个对象数组，其中包含名称和图像对象本身，就像这样makeObjectArray (1, "Images/", ".png", it=>{&nbsp; &nbsp; console.log(it)})function makeObjectArray(cur,start,end, done) {&nbsp; &nbsp; &nbsp;var ar=[]&nbsp; &nbsp; get1()&nbsp; &nbsp; function get1() {&nbsp; &nbsp; &nbsp; &nbsp; var im= new Image()&nbsp; &nbsp; &nbsp; &nbsp; im.src=start+ (cur++)+end&nbsp; &nbsp; &nbsp; &nbsp; im.onload=()=> (ar.push(im),get1())&nbsp; &nbsp; &nbsp; &nbsp; im.onerror=()=>done (ar)&nbsp; &nbsp; }}