Load Image Async from Api

Question

I have a Blazor Server .Net 6 app. It has a Synfusion grid which has an ImageViewer componen that I have built. When the grid is loaded it passes a DocumentID to the ImageViewer for each row. The ImageViwer takes the DocumenID and loads an image via a web API service from a database. Teh problem I have is that the image does not fully load, it works if I use the OnInitializedAsync method but thsi does not work if I filter the data. Any ideads the best method to load such images

<SfGrid>
<MyImageViewer AuthCookieValue="@AuthCookieValue" DocumentID="@data.DocumentID" />
<SfGrid>

//THIS IS MY IMAGE CONTROL

@inject HttpClient httpClient

@if (DocumentFileData != null)
{
<img src="data:image;base64,@(Convert.ToBase64String(DocumentFileData))"  />
}


@code {
public int _DocumentID { get; set; }

[Parameter] public string AuthCookieValue { get; set; }

[Parameter] public int DocumentID
{
    get { return _DocumentID; }

    set
    {
        _DocumentID = value;

        //I know this is naughty to call a method via a property and does not work but thought I would try to trigger the change of the image when I refresh the grid 
        Task.Run(() => GetDocument());
    }
}

private byte[] DocumentFileData { get; set; }

protected async override Task OnInitializedAsync()
{
    //THIS METHOD WORKS BUT DOES NOT WORK WHEN I CHANGE THE GRID
    if (DocumentID != 0)
    {
        await GetDocument();
    }
}


private async Task GetDocument()
{
    httpClient.DefaultRequestHeaders.Clear();
    httpClient.DefaultRequestHeaders.Add("Authorization", "Bearer " + AuthCookieValue);  
    MyServices.DocumentService documentService;documentService = new(httpClient);

    documentService = new(httpClient);
    DocumentModel doc = await documentService.GetDocumentAsync(_DocumentID);
    DocumentFileData = doc.FileData;

 }
}

Many thanks in advance

also how you are filtering the data? can you share all of Sfgrid code — Wajeeh Hasan
– Wajeeh Hasan, Commented Nov 16, 2022 at 2:43
Hi @WajeehHasan Sure - see attached pic of how my filters work. Its effectively a form with a button. I hit the DB for new data based on filters, but the images are loaded when I provide them with an DocumentID by the grid. I used this approach as I did not want to include Image binary data in the original database call. eg my filters returns 100 cars but my grid is paged to only show 10 results. So rather than include the image binary data in the 100 resultset. The grid will load the image via API call for the 10 results being shown. Let me know if you need more info — user13714356
– user13714356, Commented Nov 16, 2022 at 9:53

Henk Holterman · Accepted Answer · 2022-11-16 13:41:45Z

2

Make two small changes:

// //I know this is naughty to call a method via a property and does not work but thought I would try to trigger the change of the image when I refresh the grid 
//  Task.Run(() => GetDocument());

and

//protected async override Task OnInitializedAsync()
  protected async override Task OnParametersSetAsync()
  {

See the Lifecycle events documentation.

OnInitializedAsync() is only called once in the lifetime of a component. OnParametersSetAsync() is called each time DocumentID changes, and the side benefit is that you don't need that Task.Run() anymore.

The fact that Task.Run() was not awaited here made your UI fall out of sync and not show the image. It was being loaded but not rendered.

edited Nov 16, 2022 at 13:41

answered Nov 16, 2022 at 10:57

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user13714356 Over a year ago

OMG your are an absolute star. That worked a treat. I didnt know there was OnParametersSetAsync event. This is amazing. Thanks ever so much for all your help. Your an absolute gentleman. Really appreciate it

user13714356 Over a year ago

Opps my bad I didnt realise you could click the tick. All ticked and upward arrow clicked too. Thanks once again. Keep up the amazing work

Collectives™ on Stack Overflow

Load Image Async from Api

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related