Blazor Syncfusion Grid loading image from database saved like byte[]

[Tom Johnes]

Hello !

Please tell me how can I display images from database table field varchar(MAX) into a Blazor Syncfusion Grid !

I have found this sample but it is not working...
https://www.syncfusion.com/forums/143560/i-need-some-example-of-the-grid-loading-img-from-database-saved-like-byte

Thank You !

[Monisha Saravanan]

Hi Tom, 

Greetings from Syncfusion support. 

Currently we don’t have any sample that displays images from a database. But based on your requirement we have prepared a sample solution to display images in form of Byte[] to be displayed in Grid column. Kindly refer to the below code example. 

 

<GridColumn HeaderText="Foto" Width="auto"> 

            <Template> 

                @{ 

                    var logos = (context as Order); 

                    //here as an reference we have get images byte[] like below. 

                    //instead we suggest you to access the Fotos variable value from logos. 

                    var t = @ForecastService.GetImageByte(); 

  

                    //Convert byte arry to base64string 

                    string imreBase64Data = Convert.ToBase64String(t); 

                    string imgDataURL = string.Format("data:image/png;base64,{0}", imreBase64Data); 

                    <div class="image"> 

                        <img src="@(imgDataURL)" alt="Fotos" /> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

In this example, we have used the image file to find its byte[] and converted it as a base64 to display as an image. Similarly, we suggest you convert the Byte[] into base64 string and display in the Grid cell. Kindly refer to the below sample (in attachments) for your reference 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorGrid_Server-1801177762.zip 

If your query is not resolved or if you face further issues kindly get back to us with more details. We will prepare an custom sample for your requirement. 

Regards, 

Monisha 

[Tom Johnes]

It is working now with :

        <GridColumn HeaderText="FOTO 1" AllowFiltering="false" Width="100">

            <Template>

                @{

                    var imageData = (context as MYGridModel).image_field_name;

                    string base64String = Convert.ToBase64String( imageData , 0, imageData .Length);

                    string imagesrc = "data:image/png;base64," + base64String;

                    <div class="image">

                        <img src="@imagesrc" height="48" width="48" />

                    </div>

                }

            </Template>

        </GridColumn>

Thank you very much !

[Monisha Saravanan]

Hi Tom, 

Thanks for the update. 

We are glad to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you need further assistance. 

Regards, 

Monisha