Show image on the fly

[omeralper]

Hello,

I am newbie at ASP.net. I got stuck at a point that hopefully you can help me.

I use mssql as database and fetch all my records and images from there by using <asp:SqlDataSource>. I also use

<asp:Repeater>

to show data at every iteration. After fetching data from database, it is easy to show string by using

<%# Eval("someData") %>

.
but how can i show the data that comes as image type from database? It is not possible to show an image like this

<img src="<%# Eval("imageTypedData") %>" />

:(
Because image source needs an url!

My source code is like this if you need to imagine big picture.

<asp:Repeater ID="Repeater1" DataSourceID="IDEAS" runat="server">
        <HeaderTemplate>
            <table width="100%" border="0" cellspacing="0" cellpadding="1">
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <h2 class="title">
                        <%# Eval("title")%></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="650" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="35%">
                                <a class="title" href='<%# Eval("e-mail") %>'>
                                    <%# Eval("name") + " " + Eval("surname") %></a>
                            </td>
                            <td width="65%">
                                Tarih
                                <%# Eval("date")%>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <dx:ASPxRatingControl ID="ASPxRatingControl1" runat="server" ItemCount="10" Value='<%# Eval("rating") %>'>
                    </dx:ASPxRatingControl>
                </td>
            </tr>
            <!-- Yorumun başladığı yer -->
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="left" width="14%" id="profilePic">
                    <img src='<%# Eval("imageTypedData")' alt="image" %>" /><!-- PROBLEM IS HERE!!!-->                                         
                    </td>
                    <td width="84%">
                        <p class="post">
                            <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text='<%# Eval("idea") %>'>
                            </dx:ASPxLabel>
                        </p>
                    </td>
                </tr>
            </table> 
        </ItemTemplate>
        <SeparatorTemplate>
            <tr>
                <table width="100%">
                    <td colspan="1">
                        <hr />
                    </td>
                </table>
            </tr>
        </SeparatorTemplate>
        <FooterTemplate>
            </table>
            <p>
                &nbsp;</p>
        </FooterTemplate>
    </asp:Repeater>
    <asp:SqlDataSource ID="IDEAS" runat="server" ConnectionString="<%$ ConnectionStrings:INNOVATIONConnectionString %>"
        SelectCommand="INO_SEL_FETCHIDEA_SP" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:SessionParameter Name="searchType" SessionField="searchType" DefaultValue="0" />   
        </SelectParameters>
    </asp:SqlDataSource>

[CrappyCoder]

There is some debate whether its a good idea to store images in a database or on a file server.

If you insist on using a database then you'll need to set up a webhandler file which streams the image to your webpage.

Create a new item in your project of type of WebHandler and call it PhotoHandler

Then change the code to the following:

<%@ webhandler language="C#" class="PhotoHandler" %>
using System; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient;
 
public class PhotoHandler : IHttpHandler 
{ 
    public bool IsReusable { get { return true; } } 
    
    public void ProcessRequest(HttpContext ctx) 
    { 
        string id = ctx.Request.QueryString["PhotoID"]; 

        SqlConnection con = new SqlConnection(<<INSERT CONNECTION STRING HERE>>); 
        SqlCommand cmd = new SqlCommand("SELECT [PhotoData] FROM [PhotoTable] WHERE PhotoID = @PhotoID", con); 
        cmd.CommandType = CommandType.Text; 
        cmd.Parameters.Add("@PhotoID", PhotoID); 
        
        con.Open(); 
        byte[] pict = (byte[])cmd.ExecuteScalar(); 
        con.Close(); 

        ctx.Response.ContentType = "image/bmp"; 
        ctx.Response.OutputStream.Write(pict, 0, pict.Length); 
    } 
}

then in your Web page you would do the following:

<img src="PhotoHandler.ashx?PhotoID=<%# Eval('PhotoID') %>" />

[omeralper]

thank you!