Image is saved to the database as binary data, now I need to extract the data and put it in an tag

Question

I please need help to get my image to display correctly in the tag that is created in a literal control.

        foreach (DataRow dr in dt.Rows)
        {
            string productName = dr["PRO_Name"].ToString();
            string productPrice = dr["PRO_Price"].ToString();
            byte[] productImg = (byte[])dr["PRO_Img"];

            string sProduct = @"<div class='four-shop columns isotope-item'>
                                 <div class='shop-item'>
                                  <figure>
                                  //I need the image from the data base here:
                                  <img src='" + productImg + "' alt='' />
                                  <figcaption center code herelass='item-description'>
                                  <h5>" + productName + "</h5>
                                  <span>R" + productPrice + "</span>
                                  <a href='#' class='button color'>Add to    Cart</a</figcaption>
                                  </figure>
                                  </div>
                                  </div>";
           //Im using a literal control to create the DIV dynamically for each product in the database.
           productPanel.Controls.Add(new LiteralControl(sProduct));
        }

score 1 · Answer 1 · answered Jul 13 '13 at 10:54

1

You may use a generic handler (.ashx) that get productName and use Context.WriteBinary() method in ashx file. You should pass productName to ashx as a query string:

<img alt="Product image" src="~/somewhere/ImageHandler.ashx?productName=" + productName + "/>"

answered Jul 13 '13 at 10:54

Mazdak Shojaie

1,620
1
25
32

Thanks, your solution worked for me. I obviously had to do a bit of extra coding but I got the idea. – HashSix Jul 15 '13 at 18:25

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

You should put the URL of your image in the img's src attribute and not a byte array as you do now:

//Wrong:
byte[] productImg = (byte[])dr["PRO_Img"];
<img src='" + productImg + "' alt='' />

In order to achieve it, take a look at this answer about how to create an ASP.NET ASHX Handler and eventually retrieve the image using a URL:

Display image from database in ASP.net with C#

edited May 23 '17 at 12:05

Community

1
1

answered Jul 13 '13 at 09:42

Yair Nevet

12,725
14
66
108

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

Depending on your browser needs and image size (I don't recommend it for large files), you may embed it as a base64 string. Look at: Embedding base64 images

edited May 23 '17 at 10:25

Community

1
1

answered Jul 13 '13 at 09:49

Andre van Heerwaarde

600
1
3
8

score 0 · Answer 4 · answered Jul 15 '13 at 09:41

Try this

View:

<img src="@Url.Action("GetImg", "Home", new {id= Model.id})" alt="" width="150" height="200"/>

Controller:

    public FileContentResult GetImg(int id)
    {
        byte[] byteArray = new Model().GetImgByID(id);

        if (byteArray != null)
        {
            return new FileContentResult(byteArray, "image/png");
        }
        else
        {
            //something failed, image not found!
            return null;
        }
    }

Image is saved to the database as binary data, now I need to extract the data and put it in an tag

4 Answers4