英文:
.svg Image in MAUI Blazor
问题
我正在尝试将一个图像设置到MAUI Blazor的Razor页面中。
在MAUI中，有一种方法，你可以在Resources/Images文件夹中放置一个.svg图像。MAUI会将.svg图像转换为.png图像，然后你可以在XAML文件中使用它，就像这样：
现在我在一个MAUI Blazor应用程序中有相同的图片，我希望能以相同的方式放置我的图片，只是这次我必须使用HTML样式，就像这样：
<img src="one_list2.png">
但这根本不起作用。我尝试了各种方式，包括路径、带斜杠、反斜杠等等，都没有成功。
尝试将一个.png图像放入wwwroot文件夹可以工作，但这不是我的目标。我发现将一个.svg图像放在那里，然后根据其大小转换为.png图像非常方便。这样，所有的图片都会按照你需要的无损尺寸进行转换。
谢谢。
英文:
i am trying to set an image in to a razor page in MAUI Blazor.
In MAUI (only), there was the aproach, that you have a .svg image in the folder Resources/Images. MAUI then converts the .svg image in a .png image which you can use in the XAML file. like so:
Now i have the same picture in a MAUI Blazor app and i hoped that i can put my picture in the same way expect that i have to use the HTML style like so:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<img src="one_list2.png">
<!-- end snippet -->
But this doesn't work at all. I tryed with or witout path, path with slashes, backslashes etc. nothing works.
Trying to put a .png image into the wwwroot folder works. But this isn't the goal. I found it very nice to put a svg image which is then converted into a png depending of its size. This way all pictures would be converted exactly in the perfect size you will need lossless.
Thanks
答案1
得分: 1
我在另一个论坛上找到了一个解决方案：
- 在wwwroot中添加一个新的文件夹，例如“img”。
HTML引擎理解SVG。没有什么需要转换的。HTML本身也有SVG标记。 - 所以只需添加一个像这样的图像：
<img src="img/myImage.svg" />
对我来说，这个方法很有效...
英文:
I found a solution in an other forum:
- Add a new Folder in wwwroot p.e. "img"
The HTML-Engine understands SVG. There's noting to konvert. HTML itself has also the SVG Tag. - so just add an image like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<img src="img/myImage.svg" />
<!-- end snippet -->
For me this works well...
答案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)
{
//错误处理
}
}
更多信息，请参考ASP.NET Core Blazor Hybrid静态文件。
英文:
First, Add the image to Resources\Raw and set it to MauiAsset compilation type
Second, Check the project file to avoid setting the image in the other folder.
In razor component HTML:
<img src="@imageSource">
In the code part:
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
}
}
More information you can refer to ASP.NET Core Blazor Hybrid static files.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论