如何使用React迭代图像目录

Question

以下是我的情况：

我有一个文件夹目录，其中包含图像文件。例如：images/(ID(/(ID(-1(或2、3等(.jpg。其中(ID(是可变的(我在images目录中有数百个ID(。

我是React的新手，仍在努力了解如何在其中使用循环。我尝试了几种不同的方法，但似乎没有一种对这个特定的案例有效。

我该如何构建一个循环，动态地迭代每个文件夹，并渲染每个文件夹中的图像？我有一个旋转木马，我想调用这个循环。

谢谢你的帮助。

编辑：我试过使用这两种解决方案：

如何在React上迭代图像？

根据我自己的背景：

const images = [{ src: "./images" + ID, alt: "Your description here 1" }];
// ...
{
images.map(function(imageProps) {
return (
<li key={imageProps.src}>
<img src={imageProps.src} alt={imageProps.alt} />
</li>
);
});
}

和

使用webpack 从目录动态导入图像

根据我自己的背景：

function importAll(r) {
return r.keys().map(r);
}
const images = importAll(
require.context("./images" + ID, false, /.(png|jpe?g|svg)$/)
);

对于后者，我发现在require.context中，参数中不能有动态变量，否则它只会引发错误。第一个例子，它告诉我.map不是一个函数。这个错误没有多大帮助。

Answer 1

我在React中尝试实现这一点时也面临同样的问题。但我能够在HTML上使用JavaScript来完成这项工作。使用React似乎不可能在目录上迭代以显示其内容。到目前为止，唯一的解决方案是导入和映射。