如何在Blazor .NET 7中直接显示API返回的无落地图片？

你的需求是在Blazor应用中直接显示微服务生成的PNG图片，无需保存到任何存储，核心问题是img标签的src不能直接绑定字节数组或SKBitmap，需要转换成Data URI格式来实现。

解决方案步骤 #

1. 将图片数据转换为Data URI
   Data URI可以把二进制图片数据编码成Base64字符串，直接嵌入到img的src属性中，无需依赖外部文件路径。

2. 根据你的数据类型处理

   • 如果SendCardToGenerate返回的是PNG字节数组：

     private async Task PostCard()
     {
         // 接收图片字节数组
         byte[] cardBytes = await _messageBusClient.SendCardToGenerate(Card);
         // 转换为PNG格式的Data URI
         _cardState.Card = $"data:image/png;base64,{Convert.ToBase64String(cardBytes)}";
     
         _navigationManager.NavigateTo("/");
     }
     

   • 如果你拿到的是SKBitmap对象，先将其编码为PNG字节数组再转换：

     using var stream = new MemoryStream();
     // 假设_cardBitmap是你获取到的SKBitmap实例
     _cardBitmap.Encode(stream, SKEncodedImageFormat.Png, 100);
     byte[] cardBytes = stream.ToArray();
     _cardState.Card = $"data:image/png;base64,{Convert.ToBase64String(cardBytes)}";
     

3. 前端直接绑定显示
   保持你原来的前端代码即可，现在_cardState.Card是合法的Data URI，能直接被img标签识别：

   @if(_cardState.Card != null)
   {
       <img src="@_cardState.Card" alt="Generated Card" />
   }
   

说明 #

Data URI的格式为data:[<mediatype>][;base64],<data>，这里指定image/png表示PNG图片，后面跟着Base64编码的图片二进制数据，浏览器会直接解析并显示图片，完全不需要保存到本地或服务器存储。

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