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

Question

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

Answer 1

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.

Answer 2

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

Answer 3

我会将图像保存到网站内的目录，该目录可以使用无意义的名称（例如数据库中的记录的主键或GUID）访问外部调用者（即图像子目录），然后将href添加到此目录文件在网页中。

Answer 4

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.

Answer 5

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 eg 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).