ビューモデルを使用してデータベースから画像を表示MVC 5

Question

ビジュアルスタジオ2013 mvc 5のビルトインテンプレートを使用しています。データベースに保存された画像をホームページのインデックスビューに表示しようとしています。

the yellow highlighted sections are where i want to display the images

これは、私は、これはホームコントローラインデックスメソッド

using HaveYouSeenMeApp.Models; 
using HaveYouSeenMeApp.Models.ViewModels; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace HaveYouSeenMeApp.Controllers 
{ 
    public class HomeController : Controller 
    { 
     [AcceptVerbs(HttpVerbs.Get)] 
     public ActionResult Index() 
     { 
      ApplicationDbContext db = new ApplicationDbContext(); 
      List<ImageViewModel> ImageViews = new List<ImageViewModel>(); 
      var ImageList = (from cust in db.PetPhotoSS select new { cust.PetPhotoName, cust.Content }).ToList(); 

      foreach(var item in ImageList) 
      { 
       ImageViewModel objcvm = new ImageViewModel(); 
       objcvm.PetPhotoName = item.PetPhotoName; 
       objcvm.Content = item.Content; 
       ImageViews.Add(objcvm); 
      } 
      return View(ImageViews); 
     } 

     public ActionResult About() 
     { 
      ViewBag.Message = "Your application description page."; 

      return View(); 
     } 

     public ActionResult Contact() 
     { 
      ViewBag.Message = "Your contact page."; 

      return View(); 
     } 
    } 
} 

で私のコードでデータベース

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace HaveYouSeenMeApp.Models.ViewModels 
{ 
    public class ImageViewModel 
    {    
     public string PetPhotoName { get; set; } 

     public byte[] Content { get; set; } 

    } 
} 

から表示したい画像のための私の見解モデルです

これは私のコードですホームindex.cshtml

@model IEnumerable<HaveYouSeenMeApp.Models.ViewModels.ImageViewModel> 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<div class="jumbotron"> 
    <h1>ASP.NET</h1> 
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> 
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
</div> 

<div class="row"> 
    <div class="col-md-4"> 
     <h2>Getting started</h2> 
     <p> 
      <table> 
       <tr> 
        <th> @Html.DisplayNameFor(model => model.PetPhotoName)</th> 
        <th> 
        @Html.DisplayNameFor(model => model.Content)</th> 
       </tr> 
       @foreach (var item in Model) 
       { 
        <tr> 
         <td> 
          @Html.DisplayFor(modelItem => item.PetPhotoName) 
         </td> 
         <td> 
          @Html.DisplayFor(modelItem => item.Content) 
         </td> 
        </tr> 
       } 
      </table> 
     </p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Get more libraries</h2> 
     <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Web Hosting</h2> 
     <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p> 
    </div> 
</div> 

Answer 1

では、ビューへの画像データを直接出力することはできません。データベースからイメージ・データを取得し、レスポンスとして返すアクションが必要です。次に、この操作にURLを参照する<img>タグを追加することができます。

その後

public ActionResult GetImage(int id) 
{ 
    // fetch image data from database 

    return File(imageData, "image/jpg"); 
} 

：（それはすでにバイト配列ではない場合）

また

<img src="@Url.Action("GetImage", new { id = 1 })" /> 

、あなたはデータのURIを使用することができますが、最初のバイト配列に画像を変換する必要があるでしょうし、その後、 base64はそれをエンコードします。 [mimetype]は、（例えばimage/jpeg、）画像のMIMEタイプであると[data]がBase64でエンコードされたバイト配列である

<img src="data:[mimetype];base64,[data]" /> 

：次に、あなたのような<img>タグをページ上でそれを読み込むことができます。ただし、データURIはすべてのバージョンのIEではサポートされていないことに注意してください。その場合でも、データURIはイメージ自体よりもはるかに大きくなります。たとえば、44 KBのテストイメージは62 KBのデータURIでした。正確なサイズの違いはイメージに依存しますが、base64エンコーディングのためイメージファイル自体よりも常に大きくなります。さらに、データURIがHTMLドキュメント自体に含まれているため、初期のペイロードも大きく、応答時間とレンダリング時間が増えます。典型的な画像参照では、ブラウザーはHTML文書をレンダリングし、ダウンロードが完了すると画像を埋め込むことができますが、データURIとしてHTML文書はその中のすべての画像データがダウンロードされるまでレンダリングできません。