通过 API 从 SQL 服务器检索图像类型数据并在 Blazor Net6 C# 中显示

Question

我有 SQL 服务器 image 类型的数据，我试图通过 Web API (Net6) 检索这些数据并显示在 Blazor Web 程序集中。我可以取回一串数据，但我无法将其转换为正确的格式。

Web API 是

public byte[] SQLGetImageBytes(int Id) 
{ 
    string SqlConnectionString = configuration.GetValue<string>("SqlConnection"); 
    IDbConnection db = new SqlConnection(SqlConnectionString); 

    var data = db.QueryFirstOrDefault<Thumbs>(@"SELECT [DocumentID],  CAST([Page1] AS VARBINARY(MAX)) As Page1 FROM[Operations_cache].[dbo].[tblLargeThumbs] where[DocumentId] = " + Id); 
    return data.Page1; 
}

在API中，终点是

app.MapGet("/thumbbytes/{id}", (int id) =>
{
    SQLQuery sqlq = new();
    byte[] imageData = sqlq.SQLGetImageBytes(id);
    string imageDataready = string.Concat("data:image/png;base64,",Convert.ToBase64String(imageData));
    return imageDataready;
});

我的客户通过以下方式调用 api：

protected override async Task OnInitializedAsync()
{
      var response = await Http.GetAsync(@"https://example.com:4439/thumbbytes/47992");
      string imgstring = await response.Content.ReadAsStringAsync();
}

剃刀页面是

@if (imgstring == null)
{}
else
{
<img src=@imgstring />
}

我在网上找到的大部分“帮助”参考 Windows 平台包（系统绘图等）在跨平台 Blazor 中不起作用。

我试图在 .NET 6 中执行此操作（与 full/classic .NET 相比），并且我已经花费了太多时间尝试不同的组合（不同类型的 API 响应， bytes/strings/etc，并尝试检索为 png/jpg/bmp - 很确定它是 png），但我能得到的最好的是 Blazor/browser 中的图像占位符和 [=35= 中的字符串] testing.So 我希望我只是遗漏了一些简单的东西。我正在以只读方式处理我没有创建的图像数据（是的，它是图像格式，我知道这种格式将被弃用），所以我不能只改变它的存储方式。

Answer 1

在该行的 API 端点打断点，并复制返回的字符串

return imageDataready;

在Blazor页面创建一个img标签，粘贴复制的字符串，看是否渲染图片

<img src="paste here image data" />

看这段代码，你在这里创建了一个新的 imgstring 变量

protected override async Task OnInitializedAsync()
{
      var response = await Http.GetAsync(@"https://example.com:4439/thumbbytes/47992");
      string imgstring = await response.Content.ReadAsStringAsync();
}

而应该是

@code{
string imgstring

protected override async Task OnInitializedAsync()
    {
          var response = await Http.GetAsync(@"https://example.com:4439/thumbbytes/47992");
          imgstring = await response.Content.ReadAsStringAsync();
    }
}

通过 API 从 SQL 服务器检索图像类型数据并在 Blazor Net6 C# 中显示

Retrieve image type data from SQL Server via API and display in Blazor Net6 C#

c#

sql-server

image

.net-core

blazor