将多个图像从服务器发送到 React 应用程序？

Question

我有一个服务器来处理一个包含多个图像的文件夹。我想根据我的反应应用程序中的页码接收 30 张图像

第 1 页：img 0->29

第 2 页：img 30->59

第 3 页：img 60->89

我知道如何使用单个图像来做到这一点

res.send(file) on the server side
fetch(url).then(blob) on the react side

但是我怎么处理 30 呢？

Answer 1

有很多方法可以实现这一目标。您可以从服务器获取所有图像并将其存储在组件状态内的数组中。在第 1 页仅显示 30 个图像，在第 2 页显示其他 30 个图像...，这样您就可以根据页码显示图像。另一种方式是你的 API 应该支持分页。一旦你将页码传递给 API，它应该相应地返回图像。您可以使用任何支持分页的开源模块，您只需要将数组传递给该模块。检查这个反应分页

Answer 2

使用图像的元数据创建数组或 JSON 对象（例如 [ 0 => {文件名、路径、缩略图路径、大小、}]。在您的应用程序中，如果您尝试加载某些内容，则会使用此对象。例如，如果您不想下载图像 0 - 10，请循环遍历您的数组，并为每个条目像以前一样获取文件。