In Node/Javascript, how to load all images from directory and display

Question

For this purpose, my approach is to read all image file names from a directory and pass that as an array to the front-end javascript, which then reads one-by-one to create a dynamic image elements.

Step 1: node

const path = require('path');
const fs = require('fs');
//joining path of directory 
const directoryPath = path.join(__dirname, 'img');

const fileArray = [];
app.get('/', function(req, res) {
  //passsing directoryPath and callback function
  fs.readdir(directoryPath, function(err, files) {
    //handling error
    if (err) {
      return console.log('Unable to scan directory: ' + err);
    }

    //listing all files using forEach
    files.forEach(function(file) {
      console.log(file);
      fileArray.push(file);
    });
  });

  res.status(200).json({

    data: fileArray push // not sure, is this the way? 
  })
});

var server = app.listen(3000, function() {});

Step 2: hence my front-end will look something like, where I need to loop over the recieved image files array.

   <script type="text/javascript">
      var elem = document.createElement("img");
      elem.setAttribute("src", "images/hydrangeas.jpg");
      elem.setAttribute("height", "768");
      elem.setAttribute("width", "1024");
      elem.setAttribute("alt", "Flower");
      document.getElementById("placehere").appendChild("elem");
   </script>
   <body>
      <div id="placehere">
      </div>
   </body>
</html>

question so how do I use the recieved array to form a dynamic img array in front-end?

Just res.status(200).json(fileArray) is enough. However, "passing that to the fronend" is a little more complex. If your express app also serves the above frontend, you can easily put that image loop into a view template. Otherwise you'll need ajax to load that JSON. — user5734311
– user5734311, Commented Sep 6, 2021 at 12:30
Those are still two topics. The first part is the node code which does not work for you. And the second part is how to get it into your HTML which is a different topic. — t.niese
– t.niese, Commented Sep 6, 2021 at 12:33
Since this comes up again and again (and people don't use view engines at all or the abysmal ejs) I've created a repo showing how to show these images server-side and using ajax: github.com/khrismuc/express-images — user5734311
– user5734311, Commented Sep 6, 2021 at 12:59

Jeremy Thille · Accepted Answer · 2021-09-06 12:56:29Z

1

A simple and classic approach would be something like this :

Back-end :

import { promises } from "fs";

app.get('/', async (req, res) => {
    try {
        const files = await promises.readdir(directoryPath);
        res.status(200).json(files);
    } catch (err) {
        res.status(500).json(err);
    }
});

Front-end :

let files;
try{
    const response = await fetch("/");
    files = await response.json();
    // files is now an array of file names, do what you want with that (create <img> tags, etc.)
} catch(err){
    console.error(err)
}

answered Sep 6, 2021 at 12:56

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

In Node/Javascript, how to load all images from directory and display

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related