クライアント側のサーバーからイメージを表示して保存する方法は？

Question

現在、私のReactアプリでは、ユーザーが選択できる写真を最大5つまでリストするオプションを提供しています。 Submit itemボタンをクリックすると、その画像がS3に送信され、返されたS3 URLがその特定のアイテムに関連付けられたデータベースに保存されます。

私の質問は非常に一般的です（私はそれをお詫び申し上げます）が、Item Viewページに項目を表示すると、私は最新の20項目を取得し、アイテムURLを応答に取り込み、S3から画像をダウンロードします。

それは、ReduxのストアにそのURLのbase64でバージョンを保存するためにOKですか？私は画像をキャッシュする方法を理解するのに苦労しています。ユーザーがItem viewページから移動して戻ってくると、インターネットから画像を再度ダウンロードする必要はなく、Reduxストアから画像を取得できるようにするためです。

ダウンロードした画像をブラウザに効率的に保存する方法を教えてもらえますか？

Answer 1

• このように画像をキャッシュすると、ブラウザのメモリが過負荷になります。あなたがAWS S3を使用しているよう

• また、頻繁に画像をダウンロードすることはあなたの費用がかかります。このS3バケットの分布としてCloudFrontのを使用して

  • ：

  2の間の問題は、あなたがして、問題を解決することができます。次に、S3エンドポイントではなくCloudFrontエンドポイントと通信するためのクライアント側コードを作成する必要があります。

TTLのためのエッジ位置におけるS3のコンテンツをキャッシュするCloudFrontのを使用。したがって、ユーザーがイメージを要求すると、TTLが期限切れになるまで最初のリクエストのみが発生します。

次に、画像をダウンロードし続けてください。storeは、画像のリンクのみを保存してください。展開の見通しから、あなたはS3apps CloudFrontの間で結婚式をする必要があります。

あなたはthis type of articlesを見てする必要があるかもしれません。