How to Fetch and Display an Image from the Database in ASP.Net and C#

Question

There are so many good tutorials out there about inserting an image inside a table in a database, using the FileUpload controller.

Yet I cannot find a good tutorial about how to fetch these images and display them.

When I used to store the image name or path in the database (as a Varchar), It would be very simple by doing something like this...

HTML/ASP:

<img src="" runat="server" id="myImage" />

C#:

myImage.Src = myReader.getValue(0).toString();

The Result:

<img src="/Images/pic.png" runat="server" id="myImage" />

And Voila, the picture will be displayed.

But Now I would like to fetch uploaded images, not a path, means the type of the table column is IMAGE.

Some tutorials will eventually lead to display a picture in FULL SCREEN.

I do not want that, I simply want to fetch and display the image the same way it is displayed in the previous example, with a given size and place inside my web page.

Why am I uploading images to the database? Because these images are "Profile Pictures", not public pictures, I do not want a guest to simply browse for /Images/ to find all the pictures of my web site, public and private.

dotnetcurry.com/ShowArticle.aspx?ID=129

Tim Schmelter
– Tim Schmelter

2012-12-25 23:57:06 +00:00
Commented Dec 25, 2012 at 23:57 — Tim Schmelter
– Tim Schmelter, Commented Dec 25, 2012 at 23:57

Jonathan Henson · Accepted Answer · 2012-12-25 23:59:23Z

2

First of all, to do what you want, I would just copy the file to a temporary location and use that location for the "src" attribute. Later, you could delete the file. The much more complicated way is to create an aspx page that writes the image to the webpage as a binary stream. This page would grab the image from the database and just write the stream out in the response. You would then use this aspx page in the src attribute of your image. However, storing the image path in the database and actual file on the file system doesn't mean that the folder has to be browse-able or public. You can turn directory browsing off for example.

edited Dec 25, 2012 at 23:59

answered Dec 25, 2012 at 23:53

Jonathan Henson

8,2463 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Venemo · Accepted Answer · 2012-12-26 00:39:22Z

Create a custom IHttpHandler implementation that can serve your images from your database. You could, for example, get the bytes into a stream and copy that stream to the output of the web response.

Here is a simple example:

public class MyImageHandler : IHttpHandler
{
    public bool IsReusable { get { return true; } }

    public void ProcessRequest(HttpContext ctx)
    {
        Stream yourStream = ...; // This is where you get your data from your database
        ctx.Response.ContentType = "image/jpeg";
        yourStream.CopyTo(ctx.Response.OutputStream);
    }
}

Then you need to configure it to respond to the URLs you wish.

You could either use the Web.config file to do this
Or create an .ashx file and have it point to your own HTTP handler

If you have any questions about it, just write a comment.

Peter · Accepted Answer · 2012-12-26 00:00:51Z

-1

You will need an aspx page reading the image from the database and returning the raw bytes.

Here's a quick sketch how to do this:

byte[] data = (byte[])myReader.getValue(0);

Response.ContentType = "image/jpeg"; //or whatever your used image type is
Response.OutputStream.Write(data, 0, data.Length);
Response.End();

An alternative would be to implement a custom HttpHandler for this.

The other part is "calling" this page from your img tags with a parameter specifying the image id:

myImage.Src = "/image.aspx?id=" + myReader.getValue(0).toString();

edited Dec 26, 2012 at 0:00

answered Dec 25, 2012 at 23:56

Peter

3,9661 gold badge25 silver badges44 bronze badges

3 Comments

Aristos Over a year ago

The correct way is to use a handler and not a full page to show an image that way.

Venemo Over a year ago

-1 NEVER, EVER create an .aspx for this. As @Aristos says, create a custom IHttpHandler implementation and use that.

Peter Over a year ago

Yes, that would be the "correct" solution, but the questioner did not seem to have much experience in ASP.NET/web programming. Therefore using a dedicated page is an easy to understand concept (in comparisson to a custom handler, which "some how" hooks into the processing pipeline) and works, too.

Collectives™ on Stack Overflow

How to Fetch and Display an Image from the Database in ASP.Net and C#

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related