.svg MAUI Blazor 中的图像

问题描述 投票:0回答:2

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

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

    <img src="one_list2.png">

但这根本行不通。我尝试了或没有路径,带斜杠的路径,反斜杠等。没有任何效果。

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

谢谢

image svg maui-blazor
2个回答
0
投票

首先,将图片添加到Resources\Raw,并设置为MauiAsset编译类型

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

在 razor 组件 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
    }

}

更多信息可以参考ASP.NET Core Blazor Hybrid静态文件


0
投票

我在其他论坛找到了解决方案:

  • 在 wwwroot p.e 中添加一个新文件夹“图片” HTML 引擎理解 SVG。需要注意转换。 HTML 本身也有 SVG 标签。
  • 所以只需添加这样的图像:

<img src="img/myImage.svg" />

对我来说这很管用...

© www.soinside.com 2019 - 2024. All rights reserved.