使用Angular循环浏览文件夹中的所有文件/图像 [英] Loop through all files/images in a folder with Angular

问题描述

我有一个包含某些产品的应用程序，每个产品都有一个图库，其中包含不同数量的图像.每个图像的名称都是完全随机的/与其他图像名称无关联.

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.

每个产品图像均位于/src/assets/images/products/:id/中.

Each of the product images are in /src/assets/images/products/:id/.

我需要将路径添加到图库组件，但由于名称是随机的，因此无法遍历它们.有什么方法可以仅使用Angular循环浏览文件夹中的每个文件吗?如果不能，我可以在后台重命名文件吗?如果这很重要，我还将在Node.js后端上运行该应用程序.

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.

推荐答案

您无法使用前端做到这一点. 您需要使用后端并在其中返回文件.

You can't do that with frontend. What you need to is using your back-end and return file in it.

您将NodeJ用作后端，因此可以使用fs.readdir或fs.readdirSync方法.

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.

这篇关于使用Angular循环浏览文件夹中的所有文件/图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！