title: Different ways to display images in ASP.NET MVC and when to use which approach
body: <p>I am building a website using ASP.NET MVC4 to upload/display images and found a few ways of how to display images, chiefly the below -</p>
  
  <p><strong>1)</strong> Store the image as a file locally on the server and use a relative path to display it on the page.</p>
  
  <pre><code> //ImageFile is a property which holds a path to the image in the model
   &lt;img src="@item.ImageFile" /&gt;
  
   When the page is rendered, this becomes a path like - &lt;img src="/Content/Images/Jellyfish.jpg" /&gt;      
  </code></pre>
  
  <p><strong>2)</strong> Store the image as a byte array and retrive it using a controller action -</p>
  
  <pre><code>//Use a controller action (GetImg) to get the URL of the image
  &lt;img src="@Url.Action("GetImg", "ViewPhotos", new { id = item.ID })" alt="Image" /&gt;  
  
  When the page is rendered, this becomes a path like - &lt;img src="/ViewPhotos/GetImg/4" alt="Image" /&gt;    
  </code></pre>
  
  <p><strong>3)</strong> Store the image as a byte array and retrive it in the view directly -</p>
  
  <pre><code>//Directly re-construct the image in the view from the byte array (Image property of the model)
  &lt;img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Image))" /&gt;  
  
  When the page is rendered, this becomes a path like - &lt;img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgEA....&lt;long string&gt; .../&gt;
  </code></pre>
  
  <p>My questions are -</p>
  
  <p><em>1) What is the difference between 1 and 2 ?</em></p>
  
  <p>1 directly provides the path to file and 2 provides a URL to it. Are they the same in the background or is one approach better than the other?</p>
  
  <p>I have checked <a href="https://stackoverflow.com/questions/1759189/how-does-url-action-work-asp-net-mvc">here</a> and it says that - Url.Action will construct the path to the action, returning a url, not the results of executing the action. So when are are results retrieved?</p>
  
  <p><em>2) Does it makes a performance impact when 3 is used against 1 or 2?</em></p>
  
  <p><em>3) Which approach should be used when image sizes are small (less than 1MB) or large ?</em></p>
  
  <p>Happy if you can point to me any links which can be of help as well.
  Thanks.</p>
  
  <p>Code - </p>
  
  <p>//Model</p>
  
  <pre><code>public class Photo
  {
    public int ID { get; set; }
    public string ImageFile { get; set; }
    public byte[] Image { get; set; }
    public string Caption { get; set; }
  }
  </code></pre>
  
  <p>//Controller </p>
  
  <pre><code>public FileContentResult GetImg(int id)
  {
      byte[] byteArray = db.Photos.Find(id).Image;
      if (byteArray != null)
      {
          return new FileContentResult(byteArray, "image/jpeg");
      }
      else
      {
           return null;
      }
  }
  </code></pre>
  
  <p>//View (approach 2)</p>
  
  <pre><code>@model IEnumerable&lt;MyPhotoLibrary.Models.Photo&gt;
  @foreach (var item in Model) {
  &lt;tr&gt;
    &lt;td&gt;
      &lt;img src="@Url.Action("GetImg", "ViewPhotos", new { id = item.ID })" alt="Image" /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  }
  </code></pre>
  
  <p>//View (this is approach 3)</p>
  
  <pre><code>@model IEnumerable&lt;MyPhotoLibrary.Models.Photo&gt;
  @foreach (var item in Model) {
  &lt;tr&gt;
    &lt;td&gt;
      &lt;img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Image))" /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  }
  </code></pre>