Retrieve Image from Database in ASP.NET

Retrieve image from database in asp.net

Create a generic http handler as follows

using System;
using System.Configuration;
using System.Web;
using System.IO;
using System.Data;
using System.Data.SqlClient;

public class ShowImage : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
       Int32 empno;
       if (context.Request.QueryString["id"] != null)
          empno = Convert.ToInt32(context.Request.QueryString["id"]);
       else
          throw new ArgumentException("No parameter specified");

       context.Response.ContentType = "image/jpeg";
       Stream strm = ShowEmpImage(empno);
       byte[] buffer = new byte[4096];
       int byteSeq = strm.Read(buffer, 0, 4096);

       while (byteSeq > 0)
       {
           context.Response.OutputStream.Write(buffer, 0, byteSeq);
           byteSeq = strm.Read(buffer, 0, 4096);
       }       
       //context.Response.BinaryWrite(buffer);
    }

    public Stream ShowEmpImage(int empno)
    {
         string conn = ConfigurationManager.ConnectionStrings["EmployeeConnString"].ConnectionString;
         SqlConnection connection = new SqlConnection(conn);
         string sql = "SELECT empimg FROM EmpDetails WHERE empid = @ID";
         SqlCommand cmd = new SqlCommand(sql,connection);
         cmd.CommandType = CommandType.Text;
         cmd.Parameters.AddWithValue("@ID", empno);
         connection.Open();
         object img = cmd.ExecuteScalar();
         try
        {
            return new MemoryStream((byte[])img);
        }
        catch
        {
            return null;
        }
        finally
       {
            connection.Close();
       }
    }

    public bool IsReusable
    {
        get
        {
             return false;
        }
    }

}

and display image as follow

 Image1.ImageUrl = "~/ShowImage.ashx?id=" + id;

There are some links below

Showing image in GridView from the database?

How to show a image in database in the image control of Asp.net?

Display image from database in ASP.net with C#

http://www.dotnetcurry.com/ShowArticle.aspx?ID=129

Retrieve image from Database using Microsoft ASP.NET (MVC)

And not all news have image that's in my project

I'm supposing that if no image is available then the NewsImage property is probably null.

So you can write this code:

@{
    var imgsrc = "url_to_your_default_image"; // useful when image is not available
    if(item.NewsImage != null) 
    {
        var base64 = Convert.ToBase64String(item.NewsImage);
        imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
    }
    <img src='@imgsrc' style="max-width:100px;max-height:100px" />
}

Retrieve image from database in mvc.net

As I thought, the images were not properly stored, as I tried inserting them through application and it worked smoothly. I will have to review the insert proc.

Thank you for your answers.

how to retrieve and display image from database in asp.net

The following line will not work.

img1.ImageUrl = @"http://localhost:29450/SampleWeb/showimg.aspx?ImageData=" + Convert.ToBase64String(bytes);

Rather pass an id of the image, and look that up, vs trying to pass the binarydata via the url.

img1.ImageUrl = @"http://localhost:29450/SampleWeb/showimg.aspx?ImageId=" + imageId; 

Note: Internet Explorer will only allow to have 2,048 characters in your url.

ASP.NET C# Get retrieve and show image from SQL Server database

You can generate base64string out of byte array and use that as inline image source.

1. Convert to base64string. Refer this.

byte[] imagem = (byte[])(reader[1]);
string base64String = Convert.ToBase64String(imagem) ;

2. Use this string as inline image like following. Refer this.

Image1.ImageUrl = String.Format("data:image/jpg;base64,{0}",base64String);

Assumption: image saved as jpg.

If this differs, then change line in step#2.

Disclaimer: Base64string as image is suitable for small sized image , but if we have bigger image, then the string produced will have large sized string. Advantage is , browser don't have to request multiple times for each image ( if you implemented this as image.src= "http://handler-to-image").

---

Related Topics