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

我想随机循环文件夹中存在的所有图像。目前，我能够手动输入每个图像一个接一个，它显示。但是我想让函数自己显示给定文件夹中的图像

JS

函数rndmImg（）{
变量qs=[
{
案文：“1”，
img:“/Images/1.png”
},
{
案文：“2”，
img:“/Images/2.png”，
},
{
案文：“3”，
img:“/Images/3.png”，
},
{
案文：“4”，
img:“/Images/4.png”，
},
{
案文：“5”，
img:“/Images/5.png”，
},
];
var q=qs[Math.floor（Math.random（）*qs.length）]；
document.getElementById（“q”）.innerHTML=
“”+q.text+”
”+
'';
}

HTML

---

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

这就是说，如果它运行在某种服务器/某种类型的静态http服务器上，那么您应该能够使用XMLHttpRequest获取主目录，或者获取、读取链接，然后在稍后循环遍历图像等

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

因此，如果您正在使用pythons http_服务器模块在端口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）

也就是说，您的文件似乎都遵循递增1的模式。如果它们都遵循一个已知的模式，那么您根本不需要服务器，您只需在JavaScript中动态创建新的图像对象，并为每个对象设置一个onload函数和一个onerror函数，并且只添加没有错误的对象，或者保持递归加载，除非其中一个有错误，并且当它有错误时，这将告诉您该模式已被破坏，您不需要服务器

因此，假设模式是名称递增1，从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)
    }
}

---

如果您的服务器支持

图像

目录的目录索引，您可能能够解析响应，因为真正的问题是让后端在文件夹中列出图像，以及在代码中检索该列表的方法。你能控制你的后端吗？它是像apache或nginx这样的Web服务器吗？仅列出文件通常被称为“自动索引”。如果使用nginx，autoindex可以直接输出json，这非常容易从javascript中检索。如果您正在运行一些api后端，那么创建一个列出图像的新端点可能是正确的步骤。感谢您的回答。实际上，我正在使用electron创建一个桌面应用程序。我正在试图找到一种方法来显示位于应用程序文件夹中的图像。因此，我的应用程序文件夹中确实存在index.html。有没有办法以随机顺序循环文件夹中的图像？@ikol您可以控制服务器端代码吗？是的，我可以控制服务器端代码code@ikol因此，只需为映像目录创建一个路由，以返回一个。JSON列出该目录中的所有文件，在服务器端代码中应该有某种readdir命令来返回文件数组。然后，您可以从客户端js加载它，并将其解析为JSON，然后在那里随机循环，或者在服务器端简单地洗牌数组，这样行吗？我认为应该行。我要试一试。非常感谢您的清晰解释！

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)
})

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)
    }
}