Member Avatar for neeraj080

My Table looks like
Table Name: Categories
CategoryID : int
CategoryName: text
Description: text
Picture: Image

Now I want to display all these fields in a DataGrid.

I have done this,

DataGrid1.DataSource = DataTable or DataView;
DataGrid1.DataBind();
<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" 
            Width="100%">
        <Columns>
        <asp:BoundColumn DataField="CategoryID" HeaderText="Category ID" />
        <asp:BoundColumn DataField="CategoryName" HeaderText="Category Name" />
        <asp:BoundColumn DataField="Description" HeaderText="Description" />
        <asp:TemplateColumn HeaderText = "Picture">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" />
            </ItemTemplate>
        </asp:TemplateColumn>
        </Columns>
        </asp:DataGrid>

I'm facing problem in binding the image. All other columns are fine.

  • 2 Contributors
  • 1 Reply
  • 122 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by seslie

Dani AI

Generated

Your TemplateColumn needs a bound URL (or a streamed response) — the Image control inside the template will not display raw binary automatically. There are three practical ways to fix this depending on how you prefer to store/serve images: stream bytes via an HTTP handler, emit a data URI from the bound byte[] field, or store file paths instead of binaries. already has the Image control in the template; you just need to set its ImageUrl or assign it in ItemDataBound.

Example: stream the image from a simple HTTP handler (recommended for larger images and caching). The handler reads the varbinary/image column and writes bytes with the correct content-type.

public class GetImage : IHttpHandler
{
    public void ProcessRequest(HttpContext ctx)
    {
        if (!int.TryParse(ctx.Request.QueryString["id"], out int id)) { ctx.Response.StatusCode = 400; return; }
        byte[] img = GetBytesFromDb(id); // implement DB call
        if (img == null) { ctx.Response.StatusCode = 404; return; }
        ctx.Response.ContentType = "image/jpeg";
        ctx.Response.OutputStream.Write(img, 0, img.Length);
    }
    public bool IsReusable => false;
}

Then bind the Image to that handler URL in the ItemTemplate, for example:

ImageUrl='<%# "GetImage.ashx?id=" + Eval("CategoryID") %>'

Alternative (quick, but not great for large images): inline Base64 data URI:

ImageUrl='<%# "data:image/jpeg;base64," + Convert.ToBase64String((byte[])Eval("Picture")) %>'

Troubleshooting tips: confirm the DB column really contains raw image bytes (SQL Server varbinary/IMAGE) and not an OLE wrapper (common with Access); ensure ContentType matches the bytes; check browser dev tools for 404/500 on the handler URL; and use ItemDataBound to inspect the resolved ImageUrl if binding seems wrong. For handler details see the IHttpHandler documentation and for data URI background see MDN.

As pointed out, there are related threads that cover handler and binding variants if more edge-case help is needed.

Member Avatar for seslie
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.