.Net Core Image Helper 解決圖片 Img 緩存問題

2022-12-05 175 words One minute

https://user-images.githubusercontent.com/6058558/205682713-d0a47be5-e7bd-42ee-8032-6bc4d21af606.png

Contents

解決緩存圖片的問題。

圖片暫存問題

首先放隨便幾張圖

Views\Home\Details.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


@using WebApplication3.Models

@model IEnumerable<Dog>
@{
    ViewBag.Title = "狗的清單";
}
    <table class="table table-dark">
        <tr>
            <th>序號</th>
            <td>圖片</td>
            <th>名稱</th>
            <th>地址</th>
            <td>功能</td>
        </tr>
        @foreach (var dog in Model) 
       {
           <tr>
               <td>
                   @dog.Id
               </td>
               <td>
                   <img style="width:100%;" src="~/img/a.jpg">
               </td>
               <td>
                   @dog.Name
               </td>
               <td>
                   @dog.Address
               </td>
               <td>

                   <a asp-controller="home" asp-action="details" asp-route-id="@dog.Id" class="btn btn-primary" >查詢</a>

               </td>
           </tr>
       }
    </table>

把a.jpg跟a1.jpg做更換，再來看程式結果。

結果還是一樣。

除非手動重新整理，就會把暫存清掉。

解決方法(asp-append-version)

img圖片上面設定asp-append-version為 true，就可以解決這個問題。

1

<img style="width:100%;" src="~/img/a.jpg" asp-append-version="true">

Warning

你使用的時候沒效果，需要注意載入 TagHelpers

1

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

成功的話，滑鼠移過去可以看到提示，如下圖。

失敗的話，會是這樣。

更改圖片就會改變。

~~這邊我很好奇css,js檔案會不會有這個問題?但結果不會，還真有趣。~~

Cache 問題(補充)

這邊你用 IIS 會有這個 Cache 問題。Kestrel 是不會有這個問題，這邊你可能測試說，奇怪我還是遇到了，沒錯我也遇到了，但這個不是 Server 問題，詳細可以看我這篇(檔案下載一直抓到舊檔案的問題)，這邊我有研究出來我為什麼會抓到Cache。
可參考:循序漸進理解 HTTP Cache 機制 - Huli

Warning

我這篇是實驗結果得出結論，真正 Cache 有空再研究。建議可以 Google 一下資訊，去了解

這邊其實瀏覽器都有在幫你做一層 Cache，Firefox和Chrome都有幫你做…。要怎麼排除這個問題呢?你開無痕模式就沒這個問題。

ChatGPT怎麼說

如果您不使用IIS，則不會出現靜態檔案被快取的問題。例如，如果您使用Kestrel或其他伺服器軟件來運行應用程序，則不會自動對靜態檔案進行快取。

不過，請注意，您仍然可以手動對靜態檔案進行快取。例如，如果您使用Kestrel伺服器軟件，則可以使用ASP.NET Core中的Middleware來處理靜態檔案快取。您可以在Startup類的Configure方法中添加以下代碼來實現這一點：

1
2
3
4
5
6
7
8


app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        // Set cache control header for static files
        ctx.Context.Response.Headers["Cache-Control"] = "public,max-age=2592000";
    }
});

彩蛋

ASP.NET Core實作API的ETag快取機制