Javascript 正在读取前端包含多个图像的文件夹

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

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

每个文件夹中都有许多图像，不一定是相等的数字，文件名为

1.jpg

，

2.jpg

，等等（图像的文件名实际上只是一系列数字）

因此，我有一个定制的

ProductCarousel

组件（某个现有库中的Carousel包装组件），实际上我想将每个文件夹的名称作为属性从

App

（或任何父组件）传递给它，这个组件将简单地遍历图像，它们将显示在Carousel中

class ProductCarousel extends Component {

    constructor(props) {
        super(props);
        this.state = {
            productFolder: this.props.productFolder
        }
    }

    render() {
        return (
            <Carousel>
                { /* I'm doing a pseudo-code here somewhat, just correct me */ }
                {this.imagesInProductFolder.map(image =>
                        <div key={`${this.state.productFolder} + '_' + image`} >
                            <img alt={`${this.state.productFolder} + '_' + image`} src={`${this.state.productFolder} + '/' + image`} />
                        </div>
                    )
                }
            </Carousel>
        );
    }
}

类ProductCarousel扩展组件{
建造师（道具）{
超级（道具）；
此.state={
productFolder:this.props.productFolder
}
}
render（）{
返回(
{/*我在这里做一个伪代码，请纠正我*/}
{this.imagesInProductFolder.map（image=>
)
}
);
}
}

我的问题:

这可以用普通JavaScript实现吗

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

如果上面的答案是否定的，那么是否有必要使用像NodeJS这样的服务器端语言（我最后的选择，我想混合使用服务器端和客户端是“不好”的）

这三种方法中的任何一种都可以使用任何示例操作代码。

是的，这是可以做到的。 添加

componentdidmount

和

tryRequire

函数将解决此问题

在

componentdidmount

中，我们将在每个文件夹中迭代，导入图像并将其保存在状态。

tryRequire

功能检查该文件夹中是否存在特定图像。如果结果为false，它将中断

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;
    }
  }

更新

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

是的，可以做到。 添加

componentdidmount

和

tryRequire

函数将解决此问题

在

componentdidmount

中，我们将在每个文件夹中迭代，导入图像并将其保存在状态。

tryRequire

功能检查该文件夹中是否存在特定图像。如果结果为false，它将中断

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;
    }
  }

更新

---

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

如果图像使用可在代码中复制的可预测、可重复的算法命名，则可以将图像源设置为这些文件，在不需要服务器端语言或其他库的情况下遵循该算法。然而，这个问题中有太多的问题，其中一些是离题的（要求图书馆，要求“更好”，但没有定义“更好”的客观标准）。好吧，也许只是一个例子，说明在这种情况下通常使用什么，除非对任何人的意见作出判断，只要有效。请你的问题包括如何命名你的图像（用于命名图像的算法，除非它们真正命名为1.jpg、2.jpg、…、10.jpg、…、100.jpg等），并删除额外的问题，我相信有人可以回答。如果图像使用可预测、可重复的算法命名，你可以在代码中复制，然后，您可以按照该算法将图像源设置为这些文件，而无需服务器端语言或其他库。然而，这个问题中有太多的问题，其中一些是离题的（要求图书馆，要求“更好”，但没有定义“更好”的客观标准）。好吧，也许只是一个例子，说明在这种情况下通常使用什么，除非对任何人的意见作出判断，只要有效。请您的问题包括如何命名图像（用于命名图像的算法，除非它们真正命名为1.jpg、2.jpg、…、10.jpg、…、100.jpg等），并删除额外的问题，我相信有人可以回答。tryRequire是react中的标准组件方法吗？我从来没有听说过。你能提供此方法文档的链接吗？TryRequest是我编写的一个函数的名称，也请查看更新。几个月前我遇到了同样的问题，并用此方法解决了它。所以这不是一种文档化的方法。@oikonomiyaki，它对你有帮助吗？tryRequire是react中的标准成分方法吗？我从来没有听说过。你能提供此方法文档的链接吗？TryRequest是我编写的一个函数的名称，也请查看更新。几个月前我遇到了同样的问题，并用此方法解决了它。所以这不是一种记录在案的方法。@oikonomiyaki，它对你有帮助吗？