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
– Luaan, Commented May 21, 2015 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
– Bigtingz92, Commented May 27, 2015 at 13:24

Sivaprasath · Accepted Answer · 2015-05-21 12:46:14Z

1

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.

answered May 21, 2015 at 12:46

Sivaprasath

3901 silver badge7 bronze badges

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

Comments

Clark Kent · Accepted Answer · 2015-05-21 12:46:58Z

1

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!

answered May 21, 2015 at 12:46

Clark Kent

3251 gold badge4 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:30Z

1

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.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered May 21, 2015 at 12:47

JoelC

3,7449 gold badges35 silver badges38 bronze badges

Collectives™ on Stack Overflow

Displaying a byte[] in an image control

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related