刷新特定圖片緩存（頭像上傳）

Question

我的網站有一個頭像上傳功能，可以讓用戶上傳頭像。問題是，如果用戶嘗試上傳另一個頭像，他們的瀏覽器緩存會一直顯示他們之前的頭像，直到他們進行硬刷新（Ctrl + F5）或清除瀏覽器的緩存。

目前，這是我做顯示的化身：用戶上傳一個新的後

<img src="{{ secure_asset('storage/avatars/' . $user_id . '/avatar.png') }}" /> 

我怎樣才能刷新緩存化身，使其顯示他們的最新化身，而不是舊的一？

Answer 1

緩存是由瀏覽器完成的，並且從服務器端您不能控制瀏覽器緩存功能，因此您無法從後端更新用戶瀏覽器緩存。

您可以明確告訴瀏覽器不要通過傳遞適當的http頭來緩存該特定的網頁。以便該特定頁面將始終從服務器而不是緩存中加載。

爲PHP您可以使用下面標題

header('Cache-Control: no-cache'); 
header('Pragma: no-cache'); 

你也可以做到這一點與HTML以及

<meta http-equiv="Expires" content="Tue, 14 Aug 2017 12:12:12 GMT"> 
<meta http-equiv="Pragma" content="no-cache"> 

Answer 2

你可以利用 「緩存清除」。保存圖像時，可以將版本號保存到用戶表中。因此，用戶第一次保存頭像時，請將avatar_version列設置爲1。上傳新頭像時增加版本號。所以，當你抓住它，你可以調用

<img src="{{ secure_asset('storage/avatars/' . $user_id . '/avatar.png')."?version=".$user->avatar_version }}" /> 

如果GET參數的變化，它不會影響該文件，但瀏覽器將其識別爲一個不同的圖像，並抓住這個新的。