Maui 讀取外部檔案顯示到Blazor中

simple發表於2023-01-10
UIBlazor

Maui 讀取外部檔案顯示到Blazor中

首先在maui blazor中無法直接讀取外部檔案顯示 ，但是可以透過base64去顯示 但是由於base64太長可能影響介面卡頓

這個時候我們可以使用blob連結去載入外部圖片 它不需要copy檔案到wwwroot中 它會將byte轉換一個url供blaozr去讀取

來看實現 ：

首先第一步在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 github

來著token的分享

技術交流群：737776595

相關文章