title: Displaying database image (bytes[]) in Razor/MVC3?
body: <p>I am returning a dataset from my MS SQL 2008R2 database that contains a datatable that I am already getting data from on my Razor view.  I added a byte[] field that contains an image thumbnail that I am trying to display on that view.</p>
  
  <p>Since the byte array is relatively tiny, I figured I would try displaying the byte array inline.  However, after reading there may be some browser-related issues, I abandoned this.</p>
  
  <p>Creating a controller method seemed the way to go, (both methods found <a href="https://stackoverflow.com/questions/6040920/display-an-image-contained-in-a-byte-with-asp-net-mvc3">here</a>), however I already have the byte array ready to go on my view, and don't need to make another db call to get it based on an ID.</p>
  
  <p>Doing this, doesn't work for obvious reasons:</p>
  
  <p>... displaying other data on the page ....</p>
  
  <pre><code>@if (Model.dsResults.Tables[0].Rows[i]["ImageBytes"] == null)
  {
      &lt;img src="@Url.Content("~/Content/Images/NoPhoto.png")" border="0" /&gt;
  }
  else
  {
      &lt;img src="@Url.Action("GetImage", "SearchResults", new { imageBytes = Model.dsResults.Tables[0].Rows[i]["ImageBytes"] })" alt="Product Image" /&gt;
  }
  </code></pre>
  
  <p>...</p>
  
  <p>Controller method:</p>
  
  <pre><code>[Authorize]
  [AcceptVerbs(HttpVerbs.Get)]
  public ActionResult GetImage(byte[] imageBytes)
  {
      byte[] byteArray = imageBytes;
      return new FileContentResult(byteArray, "image/jpeg");
  }
  </code></pre>
  
  <p>... as this essentially is attempting to send the byte array over http.</p>
  
  <p>So, my question is, since I already have the byte array on my Razor view, how do I display it?</p>
  
  <p><strong>-- Update --</strong></p>
  
  <p>I realize that doing processing in the view isn't recommended, but since the data is already there, can't something like this be done:</p>
  
  <pre><code>Response.Write((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]);
  </code></pre>
  
  <p>Or...</p>
  
  <pre><code>Stream s = new MemoryStream(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]));
  System.Drawing.Image img = new System.Drawing.Bitmap(s);
  </code></pre>
  
  <p>In other postings I've read that you an do a Response.Write(byte[]...)) but this doesn't work in this case.  </p>
  
  <p><strong>-- UPADATE --</strong></p>
  
  <p>In my ongoing search for efficiency (not having to make another request to the db) the <a href="http://msdn.microsoft.com/en-us/library/system.web.helpers.webimage%28v=vs.99%29.aspx" rel="nofollow noreferrer">WebImage</a> helper seems to be a good candidate.  One of its constructors will accept a byte array to initialize the class, then using the .Write("jpeg") method, I can see the image.</p>
  
  <pre><code>&lt;td&gt;
      @{
          WebImage webImage = new WebImage(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]));
          webImage.Write("jpeg");
      }
  &lt;/td&gt;
  </code></pre>
  
  <p>The problem with using WebImage.Write() is that once used, the image is the only thing that renders on the page.  Is there a way to render this directly to a "control" on a Razor view page?</p>
  
  <p><strong>-- UPDATE --</strong></p>
  
  <p>This continues to bug me... so I tried the following, which I figured may work, since this is what we're doing from the Action... </p>
  
  <pre><code>if (Model.dsResults.Tables[0].Rows[i]["ImageBytes"] != DBNull.Value)
  {
      var img1 = new FileContentResult(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]), "image/jpeg");
      &lt;text&gt;
          &lt;img src="@new FileContentResult(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]), "image/jpeg")" /&gt;
      &lt;/text&gt;
  }
  </code></pre>
  
  <p>... doesn't work.</p>