title: Display images in asp.net mvc
body: <p>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.</p>
  
  <p>The view renders the ID, Caption of the various images <strong>but the image is not loaded</strong>. 
  The image file exists in the path stored against the ImageFile property.
  How can I fix this?</p>
  
  <p>//Model</p>
  
  <pre><code>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; } 
  }
  </code></pre>
  
  <p>//Controller</p>
  
  <pre><code>private PhotoDBContext db = new PhotoDBContext();
  
  public ActionResult Index()
  {
      return View(db.Photos.ToList());
  }
  </code></pre>
  
  <p>//View</p>
  
  <pre><code>@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;
  </code></pre>
  
  <p>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? </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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 <a href="https://stackoverflow.com/questions/1428672/asp-net-mvc-app-data-folder">this</a>) </p>
  
  <p>Thanks.</p>