从服务器路径检索图像

时间:2020-01-27 00:20:41

标签: javascript html

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

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

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

1 个答案:

答案 0 :(得分: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随新标签增加一个,然后确保存储文件在服务器上的顺序相同。

一些可能的进一步阅读

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