I want to call images from database in to ASP:repeater control but I am getting <image src“System.Byte[]”> in result

Question

This is my code in aspx file

cnn.Open();
    SqlDataAdapter da1 = new SqlDataAdapter("select * from carousel", cnn);
    DataTable dt1 = new DataTable();
    da1.Fill(dt1);
    Rp1.DataSource = dt1;
    Rp1.DataBind();
cnn.Close();

and this is repeater

<asp:Repeater id="Rp1" runat="server">
        <ItemTemplate>
        <div class="item">
            <asp:Image ID="Image1" ImageUrl='<%# Eval("image") %>' runat="server" />
        </div>
        </ItemTemplate>
        <footertemplate></footertemplate>
</asp:Repeater>

I tried everything but I am getting in result every time I really want some help on this, I am new to ASP.Net

Answer 1

This is because the value coming from the database is a byte array representing the actual data of the image. Whereas the src of an img tag expects a URL to an image. There are essentially two ways to go about this...

1. Create a separate page (or ASHX handler preferably) which returns only the data for the image (no HTML or anything like that) and link to that page.
2. Base-64 encode the byte array and include that as a data URI in the src attribute.

There are lots of tutorials for the first option online. This one was found by a quick Google search, there are others as well. Essentially what the handler would do is accept an identifier on the query string, use that identifier to get the image from the database, then write the appropriate headers and content to the response. The URL for the src attribute would then be that handler. Something like:

ImageUrl='<# "~/handler.ashx?id=" + Eval("id") #>'

(Or whatever your data-bound data uses as an identifier for the image.)

Answer 2

suppose your image column name in database "ImageName" then

Solution 1:if your image in Root Folder

 <img src='<%#Eval("ImageName")%>' alt="" />

OR



 <asp:Image ID="Image1" ImageUrl='<%#Eval("ImageName")%>' runat="server" />

Solution 2:if your image in images Folder

<img src='<%# "images/" + Eval("ImageName") %>'  alt=""/>

OR

<asp:Image ID="Image1" ImageUrl='<%# "images/" + Eval("ImageName") %>' runat="server" />

Your Final Solution:

<asp:Repeater id="Rp1" runat="server">
           <ItemTemplate>
        <div class="item">
<img src='<%#Eval("ImageName")%>' alt="" />
OR
<asp:Image ID="Image1" ImageUrl='<%# "images/" + Eval("ImageName") %>' runat="server" />
        </div>
        </ItemTemplate>
        <footertemplate></footertemplate>
</asp:Repeater> 

Answer 3

You need to convert in URI for IMG HTML tag:

<img src="<%# System.Text.Encoding.ASCII.GetString(Eval("bynarydatacolumn")) %>" />

or equivalent.