Avatar - binary image?

1 Answer 151 Views

Avatar BinaryImage

1 Answer, 1 is accepted

answered on 02 Feb 2024, 12:12 PM

Hi Angela,

Yes, you can display a binary image from a SQL datasource in the RadAvatar for ASP.NET AJAX control, but not directly. Since the RadAvatar control expects a URL to an image, you would need to serve your binary image data through a handler or a similar endpoint that can convert the binary data into a stream that the browser can then interpret as an image. Here’s an example with dummy binary data for an image (in a real scenario, fetch from your database):

Implement a generic handler (ImageHandler.ashx)

<%@ WebHandler Language="C#" Class="ImageHandler" %>

using System;
using System.Web;

public class ImageHandler : IHttpHandler {
    
    public void ProcessRequest(HttpContext context) {
        // Dummy binary data for an image, in a real scenario, fetch from your database
        byte[] imageData = Convert.FromBase64String("iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAB40lEQVR4nO2T21EEMQwEr8g/DeI8PigVLMXB+qkZuTsBS2714wEAAAAAAAAAMJ3n++OZPcMM3rIHgCslhEQdFSopIaQS9kJ+VuFeib2QalgLeVWDcyXWQipiK+S/ClwrsRVSFUshd6/fsRJLIZWxE9J69W6V2AmpjpWQ3mt3qsRKyAnYCBm9cpdKbIScgoWQWdftUImFkJOQFzL7qtUrkRdyGtJCVl2zciXSQk5EVsjqK1atRFbIqUgK2XW9ipVICjkZOSG7r1atEjkhpyMlJOtalSqREgJCQrKvNPv9QEYIfCIhROU6FeaQEAJfpAtRuMrvZM+TLgSupArJvsZXZM5FIWKk\r\n"); // A small orange triangle

        context.Response.ContentType = "image/png";
        context.Response.BinaryWrite(imageData);
    }

    public bool IsReusable {
        get {
            return true;
        }
    }
}

Configure RadAvatar (Default.aspx) - Instead of providing a direct URL to an image file, you would set the Image property of the RadAvatar to the URL of your handler.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
        <img src="ImageHandler.ashx" alt="Image" />
        <asp:Image ID="Image1" runat="server" ImageUrl="ImageHandler.ashx" />
        <telerik:RadAvatar runat="server" ID="RadAvatar1" Image="ImageHandler.ashx" Type="Image"></telerik:RadAvatar>
    </form>
</body>
</html>

You can find more information in StackOverflow: How to load image from binary data in Asp.Net?.

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!