javascript - 从服务器路径检索图像

Question

是否可以从服务器路径读取所有图像文件并将其直接传递到 html src 元素。我想做的是在脚本中循环它，然后将路径传递给 html img 元素。像这样的事情:

<img src="\\server01\SDrive\MainFold\Sample.png" alt="This is sample img from the server">

任何建议/评论我如何轻松检索图像。 TIA

Answer 1

您需要像 PHP 这样的后端编程语言来执行此操作，但您的第一步是编写一个连接到服务器的后端脚本，迭代文件夹并返回其中包含的图像。

然后您可以编写一个 JavaScript 函数(您可以从 html 事件监听器调用它，无论是单击、onLoad 还是其他内容)，该函数调用脚本并通过 GET 或 POST 请求传入文件夹路径。

然后，(可能)最简单的方法是使用 javascript 访问 DOM，找到要传递路径的 img id，然后更改 src，例如:

    var imgNode = document.getElementById("imgExampleId");
    imgNode.src = returnedPath;

您需要什么

为您想要访问的所有 html img 元素提供 id 属性。然后，您需要 PHP 或 NodeJS 等后端语言来创建脚本。每种语言访问服务器内容并将其返回到调用函数的方式略有不同，但它们都使用 GET 和 POST 请求。您还需要一种将 img id 标记与其服务器文件夹中相应的 img 相关联的方法。理想情况下，这可以在关系数据库中处理，但如果您想对其进行硬编码，您可以简单地为前端的每个标签提供一个 id 编号，每个新标签的 id 都会增加 1，然后确保存储您的文件以相同的顺序在服务器上。

一些可能的进一步阅读

    https://www.w3schools.com/js/js_ajax_intro.asp and
    https://www.php.net/manual/en/function.scandir.php