MAUI Blazor 中的 .svg 图像

Question

我正在尝试将图像设置到 MAUI Blazor 的剃刀页面中。 在 MAUI（仅）中，存在一种方法，即文件夹 Resources/Images 中有一个 .svg 图像。 MAUI 然后将 .svg 图像转换为 .png 图像，您可以在 XAML 文件中使用该图像。像这样：

现在我在 MAUI 中有相同的图片Blazor应用程序，我希望我能以同样的方式放置我的图片，期望我必须像这样使用 HTML 样式：

    <img src="one_list2.png">

但这根本不起作用。我尝试了有或没有路径，带斜杠的路径，反斜杠等。没有任何效果。

尝试将 .png 图像放入 wwwroot 文件夹中。但这不是目标。我发现放置 svg 图像非常好，然后根据其大小将其转换为 png。这样一来，所有图片都将以您需要的完美尺寸进行无损转换。

谢谢

Answer 1

首先，将图片添加到ResourcesRaw，并设置为MauiAsset编译类型

其次，检查项目文件，避免在其他文件夹中设置图像。

在剃须刀组件 HTML 中：

 <img src="@imageSource">

在代码部分：

private string? imageSource;
protected override async Task OnInitializedAsync()
{
    try
    {
        using var stream = 
            await FileSystem.OpenAppPackageFileAsync("testimage.png");
        using var reader = new StreamReader(stream);
        byte[] result;
        using (var streamReader = new MemoryStream())
        {
            stream.CopyTo(streamReader);
            result = streamReader.ToArray();
        }
        imageSource = Convert.ToBase64String(result);
        imageSource = string.Format("data:image/png;base64,{0}", imageSource);
    }
    catch (Exception ex)
    {
        //error
    }

}