ASP.NET Core Blazor 使用網站跟目錄與其他目錄的靜態圖片使用練習

更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。

在這篇文章中，將要來練習如何在 Blazor 專案內，顯示專案中的靜態圖片檔案；這些靜態的圖片檔案可以存在於該專案的網站根目錄下，也可以另外建立一個方案資料夾，宣告這個這料夾內可以儲存任何網站的靜態檔案，這也包括了圖片檔案。

在這篇文章所提到的專案原始碼，可以從 GitHub 下載

使用預設專案範本建立 Blazor 專案

想要進行這樣的專案開發練習，可以參考底下的操作步驟

• 打開 Visual Studio 2019 開發工具
• 當 [Visual Studio 2019] 對話窗出現之後，點選右下方的 [建立新的專案] 按鈕
• 在 [建立新專案] 對話窗內，請找出 [Blazor 應用程式] 這個專案開發範本，並且點選這個專案開發範本
• 請點選右下角 [下一步] 按鈕
• 出現 [設定新的專案] 對話窗，輸入適當的 [專案名稱] 、 [位置] ，完成後，請點選右下角 [建立] 按鈕

  在這個範例程式碼中，將會建立一個 BlazorOutsideImage 專案名稱

• 此時將會看到 [建立新的 Blazor 應用程式] 對話窗，這裡可以根據當時開發專案的需要，自行決定是否有調整 Blazor 專案的其他特性，若無，請點選右下角的 [建立] 按鈕
• 此時，這個 Blazor 專案已經建立完成

建立相關方案資料夾與複製圖片檔案

現在，將會準備三個圖片檔案： blazor-webassembly.png 、 blazor-server.png 、 JavaScriptInterop.png，完成後的結果將會如同下面螢幕截圖。

• 滑鼠右擊這個專案節點
• 選擇 [加入] > [新增資料夾] 選項
• 使用 StaticFilesFolder 名稱作為該方案資料夾的名稱
• 滑鼠右擊 [wwwroot] 這個特殊資料夾
• 選擇 [加入] > [新增資料夾] 選項
• 使用 Images 名稱作為該方案資料夾的名稱
• 接著，將圖片檔案 blazor-webassembly.png 複製到 [wwwroot] > [Images] 資料夾內
• 將圖片檔案 blazor-server.png 複製到 [wwwroot] 資料夾內
• 將圖片檔案 JavaScriptInterop.png 複製到 [StaticFilesFolder] 目錄下
• 記得要將 JavaScriptInterop.png 這個圖片檔案，在方案總管的屬性視窗內，宣告 [建置動作] 欄位的值為 [永遠複製]

  若沒有宣告相關圖片檔案的 [建置動作] 欄位的值為 [永遠複製]，則將無法在網頁上看到這些圖片

  

修正 Startup.cs

• 請打開 Startup.cs 這個檔案
• 找到 Configure
• 在 app.UseStaticFiles(); 敘述下面，加入這段程式碼

    // 這裡加入底下 Middleware 中介軟體 宣告，在這個專案內新增一個檔案提供者指向 /StaticFiles 目錄
    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "StaticFilesFolder")),
        RequestPath = "/StaticFiles"
    });

現在，這個專案可以使用這個 URL /StaticFiles 來指向任何在 [StaticFilesFolder] 方案資料夾內的靜態檔案了

底下的程式碼將會是完成的結果

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    // 這行不能刪除，因為這會指向專案內的 wwwroot 目錄下
    app.UseStaticFiles();
    // 這裡加入底下 Middleware 中介軟體 宣告，在這個專案內新增一個檔案提供者指向 /StaticFiles 目錄
    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "StaticFilesFolder")),
        RequestPath = "/StaticFiles"
    });

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

關於 ASP.NET Core 中的檔案提供者

ASP.NET Core 透過使用檔案提供者，將檔案系統存取抽象化，可以參考 關於 ASP.NET Core 中的檔案提供者 得到更多詳細說明

修改 Index.razor Blazor 元件

現在，要在 Index.razor 元件中，來顯示這些靜態圖片

• 在 Pages 資料夾內找到 Index.razor 檔案
• 打開這個檔案，使用底下程式碼進行替換

@page "/"

<h1>Hello, world!</h1>

<h2>網站根目錄 /blazor-server.png</h2>
<div>
    <img src="/blazor-server.png" />
</div>

<h2>網站根目錄下的目錄 /Images/blazor-webassembly.png</h2>
<div>
    <img src="/Images/blazor-webassembly.png" />
</div>

<h2>非網站根目錄，這裡是另外宣告的 StaticFilesFolder 目錄 /StaticFiles/JavaScriptInterop.png</h2>
<div>
    <img src="/StaticFiles/JavaScriptInterop.png" />
</div>
@code
{

}

查看執行結果

好的，可以來執行這個專案

當這個 Blazor 網站跑起來之後，就會看到如上面螢幕截圖，這三個圖片都正常顯示在網頁上了。