Retrieve Images From Server Path

Question

Is it possible to read all the images file from the server path the passing it direct to the html src element. What I am trying to do is to loop it in script then pass the path to the html img element. Something like this:

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

Any Suggestions/Comments how could I easily retrieve the images. TIA

Answer 1

You'll need a backend programming language like PHP to do this, but your first step would be to write a backend script that connects to your server, iterates over the folder and returns the images contained inside.

Then you may write a javascript function (you would call it from an html event listener, whether it be a click, onLoad, or something else) which calls the script and passes in the folder path through a GET or POST request.

Then, the (probably) easiest way forward is to access the DOM with javascript, find the img id you want to pass the path to, and change the src, as for example:

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

What you'll need

Provide an id attribute on all of your html img elements you wish to access. Then, you'll need a backend language like PHP or NodeJS to create the script. Each language has a slightly different way of accessing server contents and returning them to the calling function, but they all use GET and POST requests. You'll also need a way of associating an img id tag with its corresponding img in the server folder. This would ideally be handled in a relational database, but if you want to hard-code it you could simply give each tag on the frontend a number for an id that increases by one with each new tag, and then make sure to store your files on the server in the same order.

Some possible further reading

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