本記事のサンプルコードはローカル画像を動的に読み込むために使用します。説明を容易にするため、コード内のファイルパスは固定で記述しています。
まず、MAUI Blazorでは外部ファイルを直接読み込んで表示することはできませんが、base64を使用して表示することは可能です。ただし、base64は文字列が長くなりがちで、UIの動作が重くなる可能性があります。
そのような場合、blobリンクを使用して外部画像を読み込むことができます。この方法では、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に変換するよりも効果的で、UIに長い文字列が残ることがなく、強くお勧めします。もしより良い方法があれば、ぜひ教えてください。下のコメントにお寄せください。
サンプルコード：
- 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