Displaying a byte[] in an image control

Question

So I collect a varbinary(MAX) value from a database where an image is stored. It gets converted to byte[], then the aim is to display this in an image control.

This is where I read from the database

        public TemplateData(SqlDataReader dr)
    {
        initialiseData();
        if (dr.HasRows)
        {

            Logo = (byte[])dr["Logo"];

            //Logo = dr["Logo"].ToString();
            TemplateId = dr["TemplateId"].ToString();
            Comment = dr["Comment"].ToString();
            SchemeCode = dr["SchemeCode"].ToString();
            Version = dr["Version"].ToString();
        }
    }

This is where the values are displayed into the corresponding controls

        protected void ddSchemeCode_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (ddSchemeCode.SelectedIndex > 0)
        {
            // Existing Data to load from database
            TemplateData temp = DataClass.ReturnData(ddSchemeCode.SelectedItem.Text);
            if (temp != null)
            {
                txtVersion.Text = temp.Version;
                txtComment.Text = temp.Comment;
                txtSchemeCode.Text = temp.SchemeCode;
                txtTemplateId.Text = temp.TemplateId;
                img.Src = temp.Logo;
            }

So at the moment I am passing a byte[] into the source of an image control, where it would instead like a string. I've tried converting it to a string with Convert.ToBase64String(Logo) and ToString(Logo) but these do not work.

Any help is greatly appreciated. Cheers guys and gals.

Yeah, that makes it a lot trickier. If the image is small enough, you can get away with using `Convert.ToBase64String` in modern browsers (you just have to use the Data URI scheme, for example `data:image/png;base64,TheActualBase64String` for a PNG). If that's not reasonable, you'll have to have a separate request to load the image, which means either saving the image on disk, or having a `HttpHandler` to return the actual image data - of course, it will usually have to request the data again from the server (or you'll have to keep it in e.g. the `Session`, but that's tricky as well). — Luaan, May 21 '15 at 12:56
Sorry folks, turns out they were ole objects so I couldn't display them like this anyway :¬ | Cheers for the effort though! — Bigtingz92, May 27 '15 at 13:24

score 1 · Answer 1 · answered May 21 '15 at 12:46

Try converting the byte array to image and assign it to picturebox as below,

        try
        {
            using (MemoryStream mStream = new MemoryStream())
            {
                // where pData is your byte array
                mStream.Write(pData, 0, Convert.ToInt32(pData.Length));
                Image originalImage = Image.FromStream(mStream);
                picBox.Image = originalImage;
            }
        }
        catch (Exception ex)
        {
        }

Hope it helps.

score 1 · Answer 2 · answered May 21 '15 at 12:46

As you may have noticed, you cannot "print" an image in a webpage. You need to get a little bit creative now.

What you want to look into is Response.BinaryWrite. More information about that, here: https://msdn.microsoft.com/en-us/library/system.web.httpresponse.binarywrite%28v=vs.110%29.aspx

You will probably also need a generic ashx handler. Here is an example of how to show a picture using a handler: http://www.dotnetperls.com/ashx

My suggestion would be to store the logo as a byte[] into the http session. Put the source of the image to theHttpHandlerYourGonnaCreate.ashx. You can then binary write the byte[] you've stored into the session there.

Hope this helps!

score 1 · Answer 3 · edited May 23 '17 at 11:50

As Michael shows here, you can convert the byte array to a Bitmap object with something like this:

Bitmap bitmap = null;
using (MemoryStream imageStream = new MemoryStream(imageData))
{
    bitmap = new Bitmap(imageStream);
}

It isn't entirely clear what you're using for a control to show the image, but any control that can display an image should be able to take a Bitmap or Image object.

Displaying a byte[] in an image control

3 Answers3