Display images in asp net mvc

Question

I am trying to create a website to upload display images  using MVC4   I have written the below code to fetch the images which are locally stored on the server under a folder App Data Images  The path for the image is stored in the ImageFile property of the model   The view renders the ID  Caption of the various images but the image is not loaded   The image file exists in the path stored against the ImageFile property  How can I fix this     Model  public class Photo       public int ID   get  set         public string ImageFile   get  set      This contains a path where the image is locally stored on the server     public string Caption   get  set    byte   Image   get  set           Controller  private PhotoDBContext db   new PhotoDBContext     public ActionResult Index         return View db Photos ToList           View   model IEnumerable lt MyPhotoLibrary Models Photo gt    lt table gt    foreach  var item in Model      lt tr gt       lt td gt           lt img src   Url Content item ImageFile   alt      gt       lt  td gt       lt td gt           Html DisplayFor modelItem   gt  item Caption       lt  td gt    lt  tr gt      lt  table gt    Also  if I save the image as a byte array  instead of physically storing the file and using the file path   how can I re-create the image and display it in the view   i e  how do I re-create the image from the byte array while iterating over the model in the view    EDIT  I have been able to resolve the display problem by doing the below  both are needed  - 1  Changed the path to a relative path 2  Moved the images to a separate folder other than App Data   found this    Thanks

User · Accepted Answer

Make sure you image is a relative path such as:

@Url.Content("~/Content/images/myimage.png")

MVC4

<img src="~/Content/images/myimage.png" />

You could convert the byte[] into a Base64 string on the fly.

string base64String = Convert.ToBase64String(imageBytes);

<img src="@String.Format("data:image/png;base64,{0}", base64string)" />

User · Answer

It is possible to use a handler to do this  even in MVC4  Here s an example from one i made earlier   public class ImageHandler   IHttpHandler       byte   bytes       public void ProcessRequest HttpContext context                int param          if  int TryParse context Request QueryString  id    out param                         using  var db   new MusicLibContext                                  if  param    -1                                        bytes   File ReadAllBytes HttpContext Current Server MapPath    Images add png                          context Response ContentType    image png                                     else                                       var data    from x in db Images                                 where x ImageID     short param                                 select x  FirstOrDefault                         bytes   data ImageData                       context Response ContentType    image     data ImageFileType                                     context Response Cache SetCacheability HttpCacheability NoCache                   context Response BinaryWrite bytes                   context Response Flush                    context Response End                                    else                         image not found                      public bool IsReusable               get                       return false                      In the view  i added the ID of the photo to the query string of the handler

[c#] Display images in asp.net mvc

Examples related to c#

Examples related to asp.net-mvc-4