Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET
Tip/Trick

A generic Image-From-DB class for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.83/5 (5 votes)
14 Aug 2011CPOL1 min read 25K   6   3
Getting an image from a database and displaying it in an ASP.NET page is something we have to do quite often. Here is a generic class which does the job for you.
When your user logs in, say, you may wish to pull his avatar from the database and display it on the page - maybe he can't remember who he is, and needs a reminder, or you want to post the users avatar with his messages in a forum.

This isn't a difficult task, but it does need a little fiddling. So, here is the generic class I use for it...

First, you need to embed an image into your webpage:
<img alt="" src="ImageFromDb.ashx" />


You then need to code to access and display the image.
In VS, right click your project, and select "Add new Item"
When the dialog appears, select "Generic Handler" from the list, and call it "ImageFromDb"
Press [ENTER].
The code below will display an image dynamically - replace the content of the file VS created:
<%@ WebHandler Language="C#" Class="ImageFromDb" %>

using System;
using System.Web;
using System.Data.SqlClient;
/// <summary>
/// Read an image from the database and return it as a displayable image.
/// </summary>
public class ImageFromDb : IHttpHandler
    {
    /// <summary>
    /// Kept at class level to prevent needing to pass it through to private methods
    /// </summary>
    private HttpContext context = null;
    /// <summary>
    /// Interface property: Can another instance reuse this one?
    /// </summary>
    public bool IsReusable
        {
        get { return false; }
        }

    /// <summary>
    /// Reads an image from a database as returns it as a image.
    /// (For '[' read less-than, for ']' read greater-than)
    ///     [img alt="" src="ImageFromDb.ashx?db=myDB&table=myTable&field=myField&idName=idField&id=myID" /]
    /// </summary>
    /// <remarks>
    /// Parameters:
    ///    db    : name of database in connection strings - defaults to ImageDatabase
    ///    table : name of table in database containgin image field - defaults to myTable
    ///    field : name of field in table - defaults to image
    ///    idName: name of idField in table
    ///    id    : iD of record in table to extract image from
    /// </remarks>
    /// <param name="context"></param>
    public void ProcessRequest(HttpContext context)
        {
        this.context = context;
        // Read and default parameters
        string db = ReadOrDefault("db", "ImageDatabase");
        string table = ReadOrDefault("table", "myTable");
        string field = ReadOrDefault("field", "image");
        string idName = ReadOrDefault("idName", "id");
        string id = ReadOrDefault("id", "1");
        context.Response.ContentType = "image/JPEG";
        try
            {
            string dbCon = System.Configuration.ConfigurationManager.ConnectionStrings[db].ConnectionString;
            using (SqlConnection con = new SqlConnection(dbCon))
                {
                con.Open();
                string command = string.Format("SELECT {0} FROM {1} WHERE {2}=@ID", field, table, idName);
                SqlCommand com = new SqlCommand(command, con);
                com.Parameters.AddWithValue("@ID", id);
                object o = com.ExecuteScalar();
                if (o != null)
                    {
                    // Image found.
                    context.Response.BinaryWrite((byte[]) o);
                    }
                else
                    {
                    throw new ApplicationException("Requested ID is not in database");
                    }
                }
            }
        catch (Exception ex)
            {
            string err = string.Format("ImageFromDB?{0}&{1}&{2}&{3}&{4} failure", db, table, field, idName, id);
            SMWebSiteUtils.SMUtils.ErrorLog(err, ex.ToString());
            context.Response.WriteFile(@"~\Resources\Images\Problems\NoImageAvailable.png");
            }
        }
    /// <summary>
    /// Reads a value from the instance parameters, and returns it
    /// or the default if not specified.
    /// </summary>
    /// <param name="par">Parameter name to read</param>
    /// <param name="def">Defualt value if not specified</param>
    /// <returns>Parameter value or defualt if paramater not specified</returns>
    private string ReadOrDefault(string par, string def)
        {
        string val = context.Request.QueryString[par];
        if (string.IsNullOrEmpty(val))
            {
            val = def;
            }
        return val;
        }
    }

As describing the the ProcessRequest header, it uses default values for the database connection string name, the table name, the image field name, the id field name, and the id value, so if the defaults are altered to match your system, you do not need to specify them in the img tag. You can override them there if you need to for other purposes though.

The code in the exception is specific to my system: you will want to alter it to fit
how you normally handle errors and reporting - I log it to a errors database, and return a "no such image" image. You will need to change this code as it will not compile for your system! :laugh:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO
Wales Wales
Born at an early age, he grew older. At the same time, his hair grew longer, and was tied up behind his head.
Has problems spelling the word "the".
Invented the portable cat-flap.
Currently, has not died yet. Or has he?

Comments and Discussions

 
Generalhi, but how i call ImageFromDb class from any where in my... Pin
Nilesh Patil Kolhapur20-Jan-12 23:24
Nilesh Patil Kolhapur20-Jan-12 23:24 
GeneralRe: Um. Did you read the above? Notice the bit about "ASP.NET"? ... Pin
OriginalGriff20-Jan-12 23:39
mveOriginalGriff20-Jan-12 23:39 
GeneralReason for my vote of 4 good Pin
Dilip Baboo18-Aug-11 7:19
Dilip Baboo18-Aug-11 7:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.