retrieve back image from sql server database and display in MVC3

Question

i stored few images in database in binary format, now i want to display those images in my view,how can we convert those images from binary format to image format again?

this is my action menthod in my controller

           public ActionResult DislpayAllImage()
           {
            DataSet dsa = new DataSet();
            dsa = objImage.getAllImages();
            DataTable dt = new DataTable();
            dt = dsa.Tables[0];
            if (dt != null)
            {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                Byte[] image = (Byte[])dt.Rows[i]["UsImage"];
                return File(image, "image/jpg");
             }
            }
        return View();



    }

this is my code in model

     public DataSet getUserImage(int Id)
     {
        DataSet ds = new DataSet();
        try
        {
            DbCommand db = dbcon.GetStoredProcCommand("GetImage");
            dbcon.AddInParameter(db, "@Id", DbType.Int16, Id);
            db.CommandType = CommandType.StoredProcedure;
            return ds = dbconstr.ExecuteDataSet(dbCmd);
        }
        catch(Exception ex)
        {
            return ds = null;
        }
    }

view

 @foreach( var image in ViewData.Images )
 {
  <img src="@Url.Action("DislpayImage", "Home",new { id = image.ImageID })" />
 }

how can i display my image in razor view,also is the above code fine?

Karthik Chintala · Accepted Answer · 2013-01-23T06:42:30.773

2

You need to call your Controller's Action(DislpayImage()) from the View like this:

<img src="<%= Url.Action("DislpayImage", "Controller") %>" alt="myimage" />

or

<img src="@Url.Action("DislpayImage", "Controller")" alt="myimage" />

Hope it helps you.

Edit

Just pass the id of the image you want to display to Controller action

public ActionResult DislpayImage(int id)
     {
        DataSet dsa = new DataSet();

        dsa = objImage.getUserImage(id);
        var imagedata = dsa.Tables[0].Columns["MyImage"];
        return File(imagedata, "image/jpg");

     }

Now pass the id of image which you want to display in your view, like this:

<img src="@Url.Action("DislpayImage", "Controller", new { id="2" })" alt="myimage" />

Now you will get the image with id as 2.

edited Jan 23 '13 at 06:42

answered Jan 23 '13 at 05:02

Karthik Chintala

5,465
5
30
60

If there is no image then `myimage` text will be displayed, your can remove that – Karthik Chintala Jan 23 '13 at 05:10
I'm getting error in this line return File(imagedata, "image/jpg"); as'the best overload method ....has some invalid arguments, – colors bright Jan 23 '13 at 05:13
try this `byte[] imagedata` instead of `var imagedata` – Karthik Chintala Jan 23 '13 at 05:14
here im getting the error as cannot implicitly convert system.data.datacolumn to byte[] – colors bright Jan 23 '13 at 05:23
so, try like this `byte[] imagedata=(byte[])dsa.Tables[0].Columns["MyImage"];` – Karthik Chintala Jan 23 '13 at 05:26
im getting error now as, cannot convert type system.data.datacolumn to byte[] – colors bright Jan 23 '13 at 05:30
Try debugging and see what are you getting in `dsa.Tables[0].Columns["MyImage"]; ` – Karthik Chintala Jan 23 '13 at 05:49
@colorsbright did you get the binary data in your dataset image column – Karthik Chintala Jan 23 '13 at 06:17
now i got it...i converted the dataset to datatable and the below 2 lines did the work for me, Byte[] image = (Byte[])dt.Rows[0]["UsImage"]; return File(image, "image/jpg"); – colors bright Jan 23 '13 at 06:29
this is displaying 1 image, now if i want to display all the images as a gallery, i vl get all the images as binary data and how to change the view? – colors bright Jan 23 '13 at 06:32
if you want to display all of them use `foreach` or `for` – Karthik Chintala Jan 23 '13 at 06:44
i have edited my controller code and view code in my post, the problem is in forloop the file is being returned and only the 1st image is being displayed in controller code – colors bright Jan 23 '13 at 09:14

score 0 · Answer 2 · answered Jan 23 '13 at 04:29

<% foreach( var image in ViewData.Images ) { %> 
  <%= Html.Image( Url.Action( "Show", "Image", new { id = image.ImageID } ) ) %> 
<% } %>



 public class ImageController : Controller

    {

        public void Show(string id)

        {

           Image image = GetImage(id);


           Response.Buffer = True;
           Response.Clear();
           Response.ContentType = "image/gif";
           Response.BinaryWrite( image.Data );
           Response.End();

       }

    }

This response is just a copy of an answer from another forum. This is not my own. I'm pasting it here to help you and someone else in this forum with the same issue.

Here is the main link: http://forums.asp.net/post/2264885.aspx

retrieve back image from sql server database and display in MVC3

2 Answers2