how can I loop through images in a subfolder in javascript

Question

I want to loop through images in a subfolder named images. The purpose is to append them to an image bar in my html .

The solution I came up with was to pull out the images form the subfolder and put them in an array

const imgArray= ['pic1.jpg', 'pic2.jpg', 'pic3.jpg' , 'pic4.jpg', 'pic5.jpg'];

and then loop through the array

for (let i = 0; i <= imgArray.length-1; i += 1) {

const newImage = document.createElement('img');
newImage.setAttribute('src', imgArray[i] ) ;
imageBar.appendChild(newImage);}

Is there a way to set a variable as the path to the image folder and then just loop through the folder. Maybe something like:

for ( let i=0;   i<= imageFolder.length -1;   i++){
const newImage = document.createElement('img');
newImage.setAttribute('src', imgFolder[i] ) ;
thumbBar.appendChild(newImage)}

You can't read the content of a folder like that.

ibrahim mahrir
– ibrahim mahrir

2021-01-02 17:34:12 +00:00
Commented Jan 2, 2021 at 17:34 — ibrahim mahrir
– ibrahim mahrir, Commented Jan 2, 2021 at 17:34

Scott Marcus · Accepted Answer · 2021-01-02 17:46:54Z

2

You are correct to put the file names into an array as JavaScript does not have direct access to the file system for reading its contents.

See comments below:

// You can loop through an array directly by calling .forEach() on it
['pic1.jpg', 'pic2.jpg', 'pic3.jpg' , 'pic4.jpg', 'pic5.jpg'].forEach(function(img){
  const newImage = document.createElement('img');
  newImage.src = "images/" + img; // Just concatenate the path to the file name
  newImage.setAttribute("alt", "Some ALT text"); // images require an ALT attribute to be valid
  thumbBar.appendChild(newImage);
});

edited Jan 2, 2021 at 17:46

answered Jan 2, 2021 at 17:35

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

how can I loop through images in a subfolder in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related