We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show image from database inside grid

Thread ID:

Created:

Updated:

Platform:

Replies:

154812 Jul 12,2019 08:26 AM UTC Aug 17,2020 12:08 PM UTC Blazor 5
loading
Tags: Grid
Muhamad Adam Fakhrullah Nik Mohamad
Asked On July 12, 2019 08:26 AM UTC

Hi, Can i know how to view image from database to grid? because i already search everywhere but didnt find anything about it. Thank you 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 15, 2019 11:42 AM UTC

Hi Muhamad, 

Thanks for contacting Syncfusion support. 

From your query, we found that you need to show your data base images in the Grid column. To achieve this requirement you need to follow the below steps, 

Note: You have to store the images in server as byte array to achieve this requirement. 

Step #1: First you need to create a image tag in Grid column cells by using columnTemplate feature. 

Step #2: You need to convert the byte array to base64 string. You can achieve this requirement like as following code snippet,  

string base64String = Convert.ToBase64String(bytes, 0, bytes.Length); // Convert the bytes to base64 string  

Step #3: You need to add this converted base64 string with Grid data source.  

Step #4: When you display the image in Grid to column, you need to convert this base64 string to image. We suggest you to use queryCellInfo event of the Grid to achieve this requirement. Please refer the following code snippet,  

function queryCellInfo(args) { // Grid queyCellInfo event  
        if (args.column.field == "Image") {  
           var image = new Image();  
            image.src = "data:image/png;base64," + args.data.Image; // base64 string  
            args.cell.appendChild(image); // Appended the image to particular cell  
        }  
    }  


In this code we have converted and appended the based64 string to Grid cell with the help of Grid queryCellInfo event. You can access the base64 string in this queryCellInfo event argument(i.e args.data). 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Erick
Replied On June 1, 2020 04:29 PM UTC

Hello,

I would like to do the same but in blazor (SfGrid). Could you please advise?

I have the image in a byte array (retrieved from database).  One of the grid columns should show a country flag image:

<GridEvents QueryCellInfo="CustomizeCell" TValue="Nationalities"></GridEvents>
<GridColumn Field=@nameof(Nationalities.Flag) HeaderText="Bandera">
<Template>
<img ...
</Template>
</GridColumn>

I understand I have to add <img> tag to the grid column template.

How do I map the converted data to the image tag? I have the following code (incomplete because I don't know how to do the image conversion)
@code
{
public void CustomizeCell(QueryCellInfoEventArgs<Nationalities> args)
{
if (args.Column.Field == "Flag")
{
string base64String = Convert.ToBase64String(args.Data.Flag, 0, args.Data.Flag.Length);
...
}
}
}



Regards,

Erick

Renjith Singh Rajendran [Syncfusion]
Replied On June 2, 2020 10:02 AM UTC

Hi Erick, 

Greetings from Syncfusion support. 

We suggest you to use the Column Template feature of Grid to achieve this requirement. We have prepared a sample based on this scenario. Please download the sample from the link below, 
 
Please refer the code below, 

 
<GridColumn Field="Imagesrc" HeaderText="Customer Name" Width="200"> 
    <Template> 
        @{ 
            //you can fetch the byte in Grid datasource from here. And use that byte to get converted to base64String. 
            var imageUrl = (context as Order).Imagesrc; 
 
            //for an example purpose we have get an image and generated the byte. You can use your already stored byte instead of below two lines 
            Image img = Image.FromFile(@"D:\IEJNC\forums\154812\BlazorApp1\BlazorApp1\wwwroot\scripts\Images\Employees\1.png"); 
            byte[] bytes = (byte[])(new ImageConverter()).ConvertTo(img, typeof(byte[])); 
 
            //use the byte to generate a base64String and assign to image to get displayed in Grid 
            string base64String = Convert.ToBase64String(bytes, 0, bytes.Length); 
            string imagesrc = "data:image/png;base64," + base64String; 
            <div class="image"> 
                <img src="@imagesrc" /> 
            </div> 
        } 
    </Template> 
</GridColumn> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Simon
Replied On August 16, 2020 07:36 AM UTC

Hi all,

Just wondering how to get an image (as a jpg or png file) from a folder on the Server in a directory such as 'wwwroot\folder'?

Is it as simple as changing:

            Image img = Image.FromFile(@"D:\IEJNC\forums\154812\BlazorApp1\BlazorApp1\wwwroot\scripts\Images\Employees\1.png"); 

to:

                      Image img = Image.FromFile(@"\folder\image.jpg");

Thanks in advance

Shando

Renjith Singh Rajendran [Syncfusion]
Replied On August 17, 2020 12:08 PM UTC

Hi Simon, 

Greetings from Syncfusion support. 

We have analyzed your scenario. Based on this, we suggest you to use as like the below code to display image from an online service link. We have also prepared a sample based on this scenario, please download the sample form the link below, 

 
<GridColumn Field="Imagesrc" HeaderText="Customer Name" Width="200"> 
    <Template> 
        @{ 
            <div class="image"> 
                <img src="@UriHelper.ToAbsoluteUri("https://blazor.syncfusion.com/demos/images/Grid/1.png")" /> 
            </div> 
        } 
    </Template> 
</GridColumn> 


We have also used the same way to display image in our online Column Template demo. Please refer the below link, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon