0

How can I get an image control on webpage to display from sqlreader?

I have an sqlreader with the binary data and content type fields, but don't know how to get it to display to the image control on my page.

found the "GetStream" method, but can't figure out the syntax for what I need.

Fields from sqlreader are: Image1, for binary Data Image1Content, for content type (image/jpg) Image1Name, for Image Name

Image control on page is "Image1"

I am assigning other controls on the page behind and would like to do the same with the image control/s.

Tried this, but get an error in the reader["Image1"] at the end:

 while (reader.Read())
                Image1.ImageUrl = reader.GetStream("data:image/jpg;base64," + Convert.ToBase64String((byte[])reader.["Image1"]));
Brent Oliver
  • 171
  • 3
  • 21
  • 1
    There is two way. 1)simple and 2)not simple. 1) use base64 and data protocol for image. 2)you must put id of image, and get image from database using ashx for example. In reader use function getBytes or getStream. – nick_n_a Jun 07 '16 at 15:44
  • 1
    Possible duplicate of [How can I display an image from SQL Server using ASP.NET?](http://stackoverflow.com/questions/11284217/how-can-i-display-an-image-from-sql-server-using-asp-net) – Spivonious Jun 07 '16 at 15:44
  • @nick_n_a Please look at the code I just added on. – Brent Oliver Jun 07 '16 at 15:48
  • If you are using Visual Studio you can figure out the syntax by typing `reader.GetStream(` - it will show you it takes an `int`. [Get to know MSDN documentation.](https://msdn.microsoft.com/en-us/library/system.data.sqlclient.sqldatareader.getstream(v=vs.110).aspx) – Crowcoder Jun 07 '16 at 17:24
  • I'm very new to asp.net and I can't figure out how to get either GetBytes or GetStream to read the binary data stored in my Image1 field from the SqlDataReader. – Brent Oliver Jun 07 '16 at 17:28

1 Answers1

1

It always helps to do things in multiple steps so you can see more clearly where things are going wrong. You don't need both GetStream() and reader["Image1"], they accomplish almost the same thing. I will demonstrate the latter since I do not know what index Image1 is at:

while (reader.Read())
{
    byte[] imgBytes = (byte[])reader["Image1"];
    string encodedBytes = Convert.ToBase64String(imgBytes);
    string url = string.Concat("data:image/jpg;base64,", encodedBytes);
    Image1.ImageUrl = url;
}

However, if you have more that one row, you will overwrite the image url on each iteration of Read(). I doubt that is what you intend to do but I can't really tell. I suspect you just want to call Read() once, not in a while loop, but if there is only one row you would not notice the difference.

Crowcoder
  • 11,250
  • 3
  • 36
  • 45
  • Crowcoder I think this is right down the path I need to take/am looking for. Excuse the newbie question,,, but I'm not sure what would go in the //... set your image url here. The image data is in the reader as "Image1" (there is also images 2-4) and an image control named image1 on the webpage. I have set url's for image controls before, but not that reference a codebehind item like this. You are correct in that I don't need to loop through. This is being used to show detail for a single database record. – Brent Oliver Jun 07 '16 at 18:16
  • @BrentOliver, see edit. I don't think I've used web forms since before I knew what a data url was, but try just setting the `ImageUrl`. – Crowcoder Jun 07 '16 at 18:31
  • That works, thanks, now able to see all four images. – Brent Oliver Jun 07 '16 at 19:22
  • It's good way only for small images, cause base64 format expamded page size and gross pages loading too slow. – nick_n_a Jun 08 '16 at 12:58
  • @nick_n_a, that is too broad a generalization. There are pros and cons, you have to instrument and do what is best for the situation. – Crowcoder Jun 08 '16 at 13:02