title: MVC4 Retrieveing image file from SQL Server table to html image
body: <p>I trying to create  user profile page on MVC4 web application.</p>
  
  <p>On the userprofile page there is an image <code>&lt;img /&gt;</code> tag to display profile photo. Just below the image, there are "browse", "upload" buttons for the user to browse and upload photo. On clicking upload button, it should upload the photo to SQL Server and show the image on the profile page. </p>
  
  <p>I am able to upload photo and gets saved to SQL Server table. Now I want to retrieve the photo from SQL Server table to the profile page.</p>
  
  <p>Here is my User profile page /.cshtml page (razor view )</p>
  
  <pre><code>@model MvcSamples.Models.UserPicModel
  
  @{
  
      ViewBag.Title = "PersonalInfo";
  }
  
  &lt;h2&gt;PersonalInfo&lt;/h2&gt;
  
  &lt;form action="/UserDetails/PersonalInfo"  method="post" enctype="multipart/form-data"&gt;
          &lt;img src="" alt="ProfilePhoto" /&gt;
      &lt;label for="photo"&gt;Photo:&lt;/label&gt;
      &lt;input type="file" name="photo" id="photo" /&gt;
      &lt;input type="submit" value="Upload" /&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the code I am using to retrieve photo back from the SQL Server table. Note that the photo is retrieved from db as <code>byte[]</code></p>
  
  <pre><code>byte[] barrImg = usr.GetProfilePhoto(id);
  </code></pre>
  
  <p>When I debug, I can see the photo is retrieved to "barImg".</p>
  
  <p><strong>My question 1</strong> : from here how can I get this to <code>&lt;img src="" alt="ProfilePhoto" /&gt;</code> so that it will show up the actual photo on the profile page?</p>
  
  <p><strong>Question 2:</strong> can someone suggest any better alternatives suggestions /samples/pointers to achieve the same functionality involving Jquery/Ajax /javascript </p>
  
  <p>Thank you in advance</p>