我正在尝试将图像设置到 MAUI Blazor 的剃刀页面中。 在 MAUI(仅)中,存在一种方法,即文件夹 Resources/Images 中有一个 .svg 图像。 MAUI 然后将 .svg 图像转换为 .png 图像,您可以在 XAML 文件中使用该图像。像这样:
现在我在 MAUI Blazor 应用程序中有相同的图片,我希望我能以相同的方式放置我的图片,期望我必须像这样使用 HTML 样式:
<img src="one_list2.png">
但这根本行不通。我尝试了或没有路径,带斜杠的路径,反斜杠等。没有任何效果。
尝试将 .png 图像放入 wwwroot 文件夹中。但这不是目标。我发现放置 svg 图像非常好,然后根据其大小将其转换为 png。这样,所有图片都将以您需要无损的完美尺寸准确转换。
谢谢
首先,将图片添加到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静态文件
我在其他论坛找到了解决方案:
<img src="img/myImage.svg" />
对我来说这很管用...