.NET MAUI Blazor中如何正确使用Resources/Images资源？

方法一：通过配置.csproj同时支持XAML和Blazor访问 #

这种方式可以让同一张图片既作为MauiImage供XAML使用，又能被Blazor通过Web路径访问：

1. 打开项目的.csproj文件，找到对应图片的<MauiImage>配置项，添加一条<MauiAsset>配置，将资源映射到wwwroot目录下的指定路径：

<MauiImage Include="Resources\Images\YourImage.png" />
<MauiAsset Include="Resources\Images\YourImage.png" LogicalName="wwwroot\images\YourImage.png" />

2. 配置完成后，Blazor组件中就可以通过标准的HTML img标签访问：

<img src="images/YourImage.png" alt="描述文本" />

同时XAML中依然可以使用<Image Source="YourImage" />加载该图片。

方法二：读取MauiImage资源转为Base64显示 #

如果不想修改csproj配置，可以通过MAUI的资源服务读取图片内容，转为Base64后在Blazor中渲染：

1. 在Blazor组件中注入IMauiAssetService：

@inject IMauiAssetService AssetService

2. 编写代码读取资源并转换为Base64格式：

<img src="@imageBase64" alt="YourImage" />

@code {
    private string imageBase64;

    protected override async Task OnInitializedAsync()
    {
        // 注意路径要和Resources里的实际位置一致
        using var stream = await AssetService.OpenReadAsync("Resources/Images/YourImage.png");
        using var memoryStream = new MemoryStream();
        await stream.CopyToAsync(memoryStream);
        var imageBytes = memoryStream.ToArray();
        imageBase64 = $"data:image/png;base64,{Convert.ToBase64String(imageBytes)}";
    }
}

注意事项 #

• 方法一更适合高频访问的图片，资源会被打包到wwwroot，访问效率更高；
• 方法二适合动态加载场景，但每次渲染都需要读取资源并转换，性能略低于方法一；
• 确保图片的Build Action已设置为MauiImage，且文件名、路径大小写与代码中一致（部分平台对大小写敏感）。

内容的提问来源于stack exchange，提问作者Javierkaiser