CODEWITHSUNDEEP
c#asp.netwebforms
stooicrealism
stooicrealism

Reputation: 558

display a binary stream fetched from database as "image" inside the html as an <img> tag

I am trying to display an image which is fetched from the database as a binary stream, on the web form. Can you shed some light on this!

I am working on a project where users have profiles, and every user have their own profile picture displayed in the home page. THis picture comes from the database.

here is the code i have used to get the stream !

TestDBDataContext context1 = new TestDBDataContext();

            var r = (from a in context1.ImageTables where a.Id == 8 select a).First();

           MemoryStream stream = new MemoryStream(r.FileImage.ToArray());

thanks

Upvotes: 6

Views: 11493

Answers (5)

Jon Hanna
Jon Hanna

Reputation: 113272

First have a separate .aspx file for the image (actually I'd favour an IHttpHandler overload for this, but the principle's the same and let's introduce only one new concept at a time).

The .aspx file will just inherit from the code-behind, and have no content. So it would have the <%@ Page %> directive and nothing else.

In the code-behind, in the page-load event-handler, obtain the image, and set the content-type of the response to the appropriate value (or if e.g. all the images are image/png, you could just hard-code that). Then write the image to the output.

TestDBDataContext context1 = new TestDBDataContext();
int id;
if(int.TryParse(Request.QueryString["id"], out id))
{
  var r = (from a in context1.ImageTables where a.Id == 8 select a).FirstOrDefault();
  if(r != null)
  {
    Response.ContentType = r.ContentType;
    Response.BinaryWrite(r.FileImage.ToArray());
    return;
  }
}
//code to handle 404 not found for no such image here (send error message or Server.Transfer to error page, etc.

Then you can use this with <img src="profileImg.aspx?id=8" alt="" /> etc.

A performance improvement is to obtain bytes a 4k chunk at a time from the database and write them to Response.OutputStream, rather than one massive array in memory. For small files the difference is unimportant, but for very large files it can be considerable (as in "hurray now my webserver isn't falling over repeatedly any more!" considerable).

Upvotes: 1

DJ Quimby
DJ Quimby

Reputation: 3699

What I've done in the past is set the image url to an aspx page, like so:

<img src="getLogo.aspx" alt="Logo" />

Then, in the code-behind for getLogo.aspx, I've done the following:

Response.BinaryWrite( imageData );
Response.ContentType = "image/gif";

Where imageData is your image as a byte array

Upvotes: 4

PUG
PUG

Reputation: 4472

Save Memory Stream to file using:

MemoryStream memoryStream = new MemoryStream();
     using (FileStream fileStream = new FileStream(FilePath, FileMode.Open, FileAccess.Write))
     {
       memoryStream.SaveTo(fileStream);
     }

Then put filename in html.

Upvotes: 1

Adam Pointer
Adam Pointer

Reputation: 1492

Base64 encode your binary and insert in an image tag as follows (change the mimetype to suit):

<img src="data:image/gif;base64,BASE64 ENCODED BINARY HERE">

This is how you would do it, but I would not do this as some browsers cannot handle it (IE6). You are better off saving to a file first and doing it the conventional way.

Upvotes: 8

competent_tech
competent_tech

Reputation: 44931

I would save the image to a directory within the website that is accessible to external callers (i.e. an images subdirectory) using a nonsense name (such as the primary key of the record in the database or a GUID), then add an href to this file in the web page.

Upvotes: 3

Related Questions