如何使 firebase 圖像 URL 被緩存而不必將其放入 static 文件夾中？

Question

我在我的反應應用程序中有以下邏輯，我使用 firestore-storage imgae url，我的圖像在 firestore-storage

 const imgLink = "https://firebasestorage.googleapis.com/somepnglink <img src={imgLink} />

我的網絡標簽圖像第二次加載！ 第一次加載給出 200，因為這是圖像第一次加載

以前，當我將圖像存儲在 react static 文件夾中時，它們被緩存在瀏覽器 memory 中，現在我必須等待響應發生然后該圖像加載？ 如何讓瀏覽器從 firbase-stroage 緩存我的圖像，而不必每次都調用並等待響應，因為我的圖像不會按時加載。 我可以忍受標記負載..？ 沒什么大不了。 但是在那之后圖像應該被緩存在瀏覽器中，那么為什么不立即從那里加載它們而不必等待對服務器的調用呢？

Answer 1

您的請求中有cache-control header 嗎？ 您可以在上傳文件時指定在 object 元數據中使用cacheControl或使用updateMetadata() function 為現有文件添加它。

沒有緩存控制 header：

使用緩存控制 header：

默認情況下，header 將設置為private, max-age=0 。 您可以使用updateMetadata()如下所示：

await updateMetadata(storageRef, {
  cacheControl: 'public, max-age=300',
})

或者，您可以使用Google Cloud Storage控制台手動編輯元數據。