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

I have SQL Server image type data that I am trying to retrieve via a Web API (Net6) and display in Blazor web assembly. I can get back of string of data, but I am having no luck getting it into the correct format.

The Web API is

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; 
}

In the API, the endpoint is

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;
});

FIXED SECTION: My client calls the api with, and the string returned includes quotes as part of the string:

public string imgstring {get; set;}

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

  string imgresponse = response.Content.ReadAsStringAsync().Result;

  string noquotes = imgresponse.Substring(1, imgresponse.Length - 2);

  imgstring = "data:image/png;base64, "   noquotes;
}

FIXED And the razor page is (fix was to enclose imgstring in quotes)

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

Most of the "help" I've found online references Windows platform packages (System Drawing, etc) that don't work in cross-platform Blazor.

I was trying to do this in .NET 6 (vs full/classic .NET), and I have been through WAY too many hours of trying different combinations (different types of API responses, bytes/strings/etc, and tried retrieving as png/jpg/bmp - pretty sure it is png), but the best I can get is an image placeholder in Blazor/browser, and a string of characters in Insomnia/api testing. So I hope I am just missing something simple. I'm working read-only with image data that I didn't create (and yes, it is in image format, which I understand is to be deprecated), so I can't just change how it is stored.

CodePudding user response：

Put a break point on API endpoint on this line, and copy string being returned

return imageDataready;

Create an img tag in Blazor page and paste copied string, and see if it is rendering image

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

Look at this code, you are creating a new imgstring variable here

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

Whereas it should be

@code{
string imgstring

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