Loop through all files/images in a folder with Angular
You can't do that with frontend. What you need to is using your back-end and return file in it.
You are using NodeJs as back-end so can use the fs.readdir
or fs.readdirSync
methods.
fs.readdir
const testFolder = './images/';
const fs = require('fs');
fs.readdir(testFolder, (err, files) => {
files.forEach(file => {
console.log(file); // use those file and return it as a REST API
});
})
fs.readdirSync
const testFolder = './images/';
const fs = require('fs');
fs.readdirSync(testFolder).forEach(file => {
console.log(file);
})
Read the full documenation, it may help you to how you can proceed.
![Simeon Nakov](https://i.stack.imgur.com/4YjGa.jpg?s=256&g=1)
Simeon Nakov
Updated on June 13, 2022Comments
-
Simeon Nakov about 2 years
I have an app with some products and each product has a gallery with a different amount of images. Each of the images has a name that is completely random / no correlation with the other image names.
Each of the product images are in
/src/assets/images/products/:id/
.I need to add the paths to a gallery component but I can't loop through them because the names are random. Is there any way to just loop through each file from a folder using only Angular? If not can I do it on the back-end without renaming the files? I'm also running the app on a Node.js back-end if that matters.