ASP.NET Core 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 網站跑起來之後，就會看到如上面螢幕截圖，這三個圖片都正常顯示在網頁上了。
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
在這篇文章中，將要來練習如何在 Blazor 專案內，顯示專案中的靜態圖片檔案；這些靜態的圖片檔案可以存在於該專案的網站根目錄下，也可以另外建立一個方案資料夾，宣告這個這料夾內可以儲存任何網站的靜態檔案，這也包括了圖片檔案。