在前端读取包含大量图像的文件夹

我是React的新手，我的产品在公用文件夹中包含多个图像。文件夹名称是产品名称。

public
--product_1
--product_2
...
--product_n


在每个文件夹内有许多图像，不一定是相等的图像，文件名分别为1.jpg，2.jpg，依此类推（实际上，图像的文件名只是一个数字序列）。

因此，实际上，我有这个自定义ProductCarousel组件（一些现有库中对Carousel组件的包装），我想在其中将每个文件夹的名称作为属性传递给App（或任何父组件）并且该组件将简单地遍历将在轮播中显示的图像。

class ProductCarousel extends Component {
constructor(props) {
super(props);
this.state = {
productFolder: this.props.productFolder
}
}
render() {
return (

{ /* I'm doing a pseudo-code here somewhat,just correct me */ }
{this.imagesInProductFolder.map(image =>






我的问题：

1. 这可以用普通的Javascript完成吗？




2. 如果使用纯Javascript太困难（或不可能）或代码太多，是否有一个React库可以使用以更简单的方式解析？




3. 如果以上答案是否定的，是否有必要使用像NodeJS这样的服务器端语言（我的最后选择，我想将服务器端和客户端混合在一起是“不好的做法”）？ / p>

这三个示例中的任何一个示例代码都将受到赞赏。

是的，可以做到。
添加componentdidmount和tryRequire函数将解决此问题。

在componentdidmount中，我们将在每个文件夹中进行迭代并导入图像，并将其保存在状态中。
tryRequire函数检查该文件夹中是否存在特定图像。如果结果为假，它将中断componentdidmount

componentDidMount() {
let i = 1;
const pathName = this.props.fileName;
while (this.tryRequire(`./images/${pathName}/${i}.jpg`)) {
import(`./images/${pathName}/${i}.jpg`).then(image => {
this.setState({ images: [...this.state.images,image.default] });
});
i = i + 1;
}
}
tryRequire(path) {
try {
return require(`${path}`);
} catch (err) {
return null;
}
}


更新

实际上，如果将图像与组件保存在同一文件夹或子文件夹中，则此方法将起作用。