如何在客户端显示和存储来自服务器的图像？

Question

在我目前的React应用中，我为用户提供了一个选项，可以列出最多可以选择5张图片的项目。点击Submit item按钮后，我将这些图片发送到S3，并将返回的S3网址存储到与该特定项目相关联的数据库中。

我的问题非常笼统（我为此道歉）但是当我在Item View页面上显示这些项目时，我会检索最近的20个项目，并在回复和下载中获取项目网址来自S3的图片。

将该URL的base64版本存储在Redux存储中是否可以？因为我很难理解如何缓存图像。因为如果用户离开Item view页面并返回，我希望能够从Redux商店获取图像，而不必再次从互联网上重新下载图像。

有人能指出我如何在浏览器上有效存储下载的图像吗？

Answer 1

• 以这种方式缓存图像会使浏览器内存过载。

• 此外，在使用AWS S3时，经常下载图像会花费您的成本。

在两个问题之间，您可以通过以下方式解决问题：

• 使用 Cloudfront 作为此S3存储分区的分发。然后，您应构建客户端代码以与CloudFront端点而不是S3端点进行通信。

使用Cloudfront将在TTL的边缘位置缓存S3内容。因此，当用户请求图像时，它将只花费您第一个请求，直到TTL过期。

然后，我建议继续下载图片，您的redux store应仅保存图片链接。从部署角度来看，您应该在S3❤️CloudFront之间举行婚礼。

您可能需要查看this type of articles。