MAUI Blazorでローカル画像を表示するのに最適なオプション？Windows\macOS\Android\iOSをサポートします。

このコード例は、コードファイルパスを記述しやすくするために、ローカル画像を動的に読み込むために使用できます。

まず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

トークンからの共有

技術交流グループ：73777659 5

この記事は転載から。

アーティスト：DOTNET-SIMPLE

Mauiは外部ファイルをBlazorに表示する

原文へのリンク：https//www.cnblogs.com/hejiale010426/p/17040997.html