本文範例程式碼可用於動態載入本地圖片，為了便於演示文中程式碼檔案路徑是寫死的。
首先在 MAUI Blazor 中無法直接讀取外部檔案顯示，但是可以透過 base64 去顯示，但由於 base64 太長可能影響介面卡頓...
這時我們可以使用 blob 連結去載入外部圖片，它不需要 copy 檔案到 wwwroot 中，它會將 byte 轉換成一個 url 讓 Blazor 去讀取。
來看實作：
首先第一步在 wwwroot 中的 index.html 加入一個 js 方法，用來將 byte 轉換成 blob 連結，將以下方法複製進去
<script>
/**
* 將圖片位元組陣列轉換成 blob url
*/
function imgToLink(blob) {
var myBlob = new Blob([blob], { type: "image/png" });
return (window.URL || window.webkitURL || window || {}).createObjectURL(myBlob);
}
</script>
我們在 Index.razor 中加入以下程式碼
@page "/"
@inject IJSRuntime JS
<img src="@url" height="200px" width="200"/>
@code
{
private string url;
protected override async Task OnInitializedAsync()
{
// 放在專案目錄下的 logo.png 會被打包到 cache 資料夾中，這裡你也可以放外部檔案連結，但你需要保證在讀取前有讀取權限，否則會報錯
var logo = Path.Combine(FileSystem.CacheDirectory, "logo.png");
// 讀取轉換成 byte[]
var data = await File.ReadAllBytesAsync(logo);
// 透過 js 轉換成 blob 連結
url = await JS.InvokeAsync<string>("imgToLink", data);
await base.OnInitializedAsync();
}
}
完成以後我們將圖片加入專案中：
修改圖片屬性為永遠複製：
然後直接執行程式：
這種效果比轉 base64 更好，不會在介面殘留太多字串，極力推薦使用，如果你有更好的辦法請推薦給我，歡迎在下方留言。
範例程式碼：
- gitee：https://gitee.com/hejiale010426/img-to-blob
- github：https://github.com/239573049/ImgToBlob
來自 token 的分享
技術交流群：737776595
本文來自轉載。
作者：dotnet-simple
原文標題：Maui 讀取外部檔案顯示到 Blazor 中
原文連結：https://www.cnblogs.com/hejiale010426/p/17040997.html