Show Images from Database ASP.Net - asp.net

Question

I am new to ASP.net and have some problem to show images. My designer code is as bellow.
<div id="directory-logo-wrapper" class="floatright">
<table id="wrapper1" runat="server">
<tr>
<td>
<img src="../images/companylogo.png" alt="LogoWrapper" />
<%--<asp:Image ID="Image1" runat="server" Visible="true" alt="LogoWrapper" />--%>
</td>
</tr>
</table>
</div>
My code behind code is as bellow.
protected void ShowImageFile(object sender, EventArgs e)
{
byte[] bytes = {};
bytes = (byte[])GetData("SELECT UploadedLogo FROM Projects WHERE ProjectId =" + id).Rows[0]["UploadedLogo"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
//Image1.ImageUrl = "data:image/png;image/jpg;base64," + base64String;
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConnectionInfo.GetConnectionString();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
Problem: how to set table:wrapper1 img src in code behind because it does not shown in code behind. I tried to do with Image1 but its also not accessing in code behind.
Please help me.
Thanks, Raja

Answer 1

Try Like this
<div id="directory-logo-wrapper" class="floatright">
<table id="wrapper1" runat="server">
<tr>
<td>
<img id="myimage" runat="server" src="../images/companylogo.png" />
</td>
</tr>
</table>
</div>
You can access Src from Code Behind
Try like this
'Get byte array from image file in the database with basic query
SqlDataAdapter myAdapter1 = new SqlDataAdapter("Select [logo] FROM [dbo].[tblCompanyInfo]", GlobalUser.currentConnectionString);
DataTable dt = new DataTable();
myAdapter1.Fill(dt);
foreach (DataRow row in dt.Rows)
{
// Get the byte array from image file
byte[] imgBytes = (byte[])row["logo"];
// If you want convert to a bitmap file
TypeConverter tc = TypeDescriptor.GetConverter(typeof(Bitmap));
Bitmap MyBitmap = (Bitmap)tc.ConvertFrom(imgBytes );
string imgString = Convert.ToBase64String(imgBytes);
// Set the source with data:image/bmp
myimage.Src = String.Format("data:image/Bmp;base64,{0}\"", imgString);
}
EDIT
Access Image inside GridView
private string m_ConcatUrl;
protected void gridView_RowDataBound(Object sender, GridViewRowEventArgs args)
{
if(args.Row.RowType == DataControlRowType.DataRow)
{
Image imgCtrl = (Image) args.Row.FindControl("imgCtrl");
imgCtrl.ImageUrl = m_ConcatUrl;
}
}
(or)
private string m_ConcatUrl;
protected void gridView_RowDataBound(Object sender, GridViewRowEventArgs args)
{
if(args.Row.RowType == DataControlRowType.DataRow)
{
HtmlImage img = (HtmlImage) args.Row.FindControl("imgCtrl");
imgCtrl.Src= m_ConcatUrl;
}
}

Answer 2

You can try following way:
HTML:
<div id="directory-logo-wrapper" class="floatright">
<table id="wrapper1" runat="server">
<tr>
<td>
<img src='<%# ImageUrl(ProjectId) %>' alt="LogoWrapper" />
<%--<asp:Image ID="Image1" runat="server" Visible="true" alt="LogoWrapper" />--%>
</td>
</tr>
</table>
</div>
Code Behind:
private string ImageUrl(int ProjectId)
{
byte[] bytes = {};
bytes = (byte[])GetData("SELECT UploadedLogo FROM Projects WHERE ProjectId =" + ProjectId).Rows[0]["UploadedLogo"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
return "data:image/png;image/jpg;base64," + base64String;
//Image1.ImageUrl = "data:image/png;image/jpg;base64," + base64String;
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConnectionInfo.GetConnectionString();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
Hope this helps.