Using Radzen Image for profile photo display

Radzen Studio Blazor WebAssembly
1 
    <RadzenDataList AllowPaging="true"  Data="@customersData" TItem="Customer" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
                <Template Context="customer">
                    <RadzenCard Style="width: 100%; padding: 0; overflow: hidden;">
                        <div class="container">
                            <div class="row" style="margin-left: calc(var(--bs-gutter-x) * -1); margin-right: calc(var(--bs-gutter-x) * -1)">
                                <div class="col-lg-3 p-3 product-title">
                                    <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H5" Class="rz-color-secondary">Customer Name</RadzenText>
                                    <RadzenText TextStyle="TextStyle.Body2" class="mb-sm-2 mb-lg-0">@(customer.CustomerName)</RadzenText>

                                            <RadzenImage Path="@getImage(customer.Documents)" style="width: 40px; height: 40px; border-radius: 8px;"></RadzenImage>
                                    </div>

C# side

IEnumerable customersData;

public string getImage(byte[] image)
{
    if (image != null)
    {
        var base64 = Convert.ToBase64String(image);
        var fs = string.Format("data:image/jpg;base64,{0}", base64);
        return fs;
    }
    else
    {
        return "";
    }
}

I have created a customer table with Documents column containing profile images in varbinary format in sql server. I am unable to see images but only blank images for all customers

2

Probably your data URI is not valid. This could happen if the stored data isn't actually JPG but something else. You can easily test by replacing RadzenImage with a regular img element:

<img src="@getImage(customer.Documents)" 
 style="width: 40px; height: 40px; border-radius: 8px;" />
3

Just replace yours with
<RadzenImage Path="@($"data:image/jpeg;base64,{Convert.ToBase64String(customer.Documents)}")" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px; float: left;" />
getImage method is not needed.

Works with images in varbinary(MAX) format in sql server.

1 Like