如何在 React 的 public/images 文件夹中填充文件数组？

Question

所以我有一个具有这种结构的 React 应用程序

-MyApp
-public
--images
---Adam.png
---Jane.png
-src
--components

对于我的一个组件，我想显示所有图像。有没有办法在我的 public/images 文件夹中获取文件名数组？我知道如何将数组映射到图像列表，但不知道如何首先获取该文件名数组。

Answer 1

这样做是很自然的问题（因为替代方法总是一一导入似乎错误的内容），但最终将反应构建到一些优化的静态代码中。所以整个问题是“如果您将另一个图像添加到该文件夹​​并刷新页面会发生什么？”。答案是 它无法对其做出反应，因为您正在执行的那个循环（一个生成 img 标签或其他东西）是在构建期间运行的。您需要的是服务器“读取”这些文件夹并让您知道那里有什么（对于您已经构建的应用程序），您可以更新状态并在运行时呈现更多元素以响应服务器。

在 Webpack 中有另一个选项（如 @UbeytDemir 所述）可以了解什么是公用文件夹并在构建期间迭代这些内容，但这仍然意味着您必须在之后重新构建应用程序每个新图像，因为它在没有服务器的运行时根本无法做到这一点。它只会将这些导入统一到一行中，但恕我直言，重要的是要理解为什么这在客户的应用程序中不可能做到。