picture from SQL database not displayed by jquery lightbox in detailsView ImageField and asp:Image control (master pages)

Question

when i click the picture that is displayed in the detailsView ImageField, the jquery lightbox pops up, but does not show the picture. it shows a red x in the middle of the lightbox. the same thing happens with the asp:Image control shown in the code below. The picture is stored in a SQL database Image datatype. Using master pages.

<asp:DetailsView ID="dvRoom" runat="server" AutoGenerateRows="False" 
                    DataKeyNames="RoomID"          >               
    <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
    <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
    <Fields>                                
        <asp:BoundField DataField="Name" HeaderText="Name"  /> 
        <asp:BoundField DataField="Capacity" HeaderText="Capacity"/>                   
        <asp:BoundField DataField="Description" HeaderText="Description"/>  

        <asp:HyperLinkField HeaderText="Calendar URL" datatextfield="Name"
                datanavigateurlfields="WebAddress" />
            <asp:TemplateField>
            <ItemTemplate>
              <asp:Image ID="Image1" runat="server" CssClass="lightbox"
               ImageUrl='<%# Eval("RoomID", "~/DisplayImage.aspx?RoomID={0}") % >' />  
              </ItemTemplate>
                    <ControlStyle Height="75px" />
                    <ItemStyle Height="75px" />
        </asp:TemplateField> 

        <asp:ImageField HeaderText = "Photo"   ControlStyle-CssClass="lightbox" 
         AlternateText="no image found in database" DataImageUrlField="RoomID"  
         DataImageUrlFormatString="~/DisplayImage.aspx?RoomID={0}">
       <ControlStyle Width="150px" />

       </asp:ImageField>
        </Fields>           
    <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
    <EditRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="#DCDCDC" />
    </asp:DetailsView>




public partial class DisplayImage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
      SqlConnection cn = new SqlConnection  
        (System.Configuration.ConfigurationManager.ConnectionStrings
         ["ConnectionString1"].ConnectionString);
    SqlCommand cmd = new SqlCommand();
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.CommandText= "SELECTfromRoomWithRoomID";
    cmd.Connection = cn;
    SqlParameter paraName = new SqlParameter("@RoomID", SqlDbType.Int);
    paraName.Value = Request.QueryString["RoomID"].ToString();
    cmd.Parameters.Add(paraName);
    cn.Open();
    SqlDataReader dr = cmd.ExecuteReader();
    try
    {
        if (dr.Read()) //check to see if image was found
        {
            //Response.ContentType = dr["fileType"].ToString();
            Response.BinaryWrite((byte[])dr["Image"]);
        }
    }
    catch (InvalidCastException iceE)
    {
        return;   
    }

    cn.Close();
   }
   }





  <asp:Content ID="Content4" ContentPlaceHolderID="Main" Runat="Server"> 
   <script type="text/javascript"> 
     $(document).ready(function () {
         $(".lightbox").lightBox({
         overlayBgColor: '#FFF',
         overlayOpacity: 0.6,
         imageLoading: 'Image/lightbox-ico-loading.gif',
         imageBtnClose: 'Image/lightbox-btn-close.gif',
         imageBtnPrev: 'Image/lightbox-btn-prev.gif',
         imageBtnNext: 'Image/lightbox-btn-next.gif',
         containerResizeSpeed: 350,
         txtImage: 'Imagem'
    });
  });
  </script>
 </asp:Content>

Answer 1

I think you need to provide a Header to explain the Content-type from DisplayImage.

I have often used just image/gif no matter the extension.. the browser usually figures it out.

Answer 2

http://forums.asp.net/p/1576778/3972639.aspx#3972639