Load image from database in asp.net

Suggested Videos
Part 167 - Using ASP.NET validation controls with recaptcha
Part 168 - Customizing recaptcha control
Part 169 - Save image to database using asp.net



In this video we will discuss how to load image from database using asp.net and c#. This is continuation to Part 169. Please watch Part 169 from ASP.NET tutorial for beginner.





When we click on "View Uploaded Image" link, the user will be redirected to WebForm2.aspx. The Id of the image will be passed as a query string parameter. In the page load event, we need to retrieve the image from the database and display it on the web page.

Step 1 : Create stored procedure to retrieve image by Id.

Create procedure spGetImageById

@Id int

as

Begin

    Select ImageData

    from tblImages where Id=@Id

End

Go

Step 2 : Drag and drop an Image control on WebForm2.aspx. 

<asp:Image ID="Image1" Height="500px" Width="500px" runat="server" />

Step 3 : Copy and paste the following code in WebForm2.aspx.cs

using System;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

namespace Demo

{

    public partial class WebForm2 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

            using (SqlConnection con = new SqlConnection(cs))

            {

                SqlCommand cmd = new SqlCommand("spGetImageById", con);

                cmd.CommandType = CommandType.StoredProcedure;

                SqlParameter paramId = new SqlParameter()

                {

                    ParameterName = "@Id",

                    Value = Request.QueryString["Id"]

                };

                cmd.Parameters.Add(paramId);

                con.Open();

                byte[] bytes = (byte[])cmd.ExecuteScalar();

                string strBase64 = Convert.ToBase64String(bytes);

                Image1.ImageUrl = "data:Image/png;base64," + strBase64;

            }

        }

    }

}