イメージがビューに表示されないASP.NET MVC

Question

SQLサーバーデータベースからイメージをアップロードおよび取得しようとしています。モデル、コントローラ、ビューを以下のように作成しました。

ビューモデルはまた、私は

をアップロードして表示するアクションメソッドすなわちインデックスを有する画像を作成し、盗んするコントローラを作成し、実際のモーダル

CheckoutModel.cs

public class CheckOutViewModel 
{ 
    public int ID { get; set; } 
    public ApplicationUser CandidateId { get; set; } 
    [Required] 
    public byte[] Image { get; set; } 
} 

に非常に似ていますIndexメソッドはイメージを表示するために使用され、createメソッドはデータベースにイメージをアップロードおよび保存するために使用され、retrieveメソッドはそのIDに従ってイメージを照会するために使用されます。

CheckOutController.cs

using Microsoft.AspNet.Identity; 
using shanuMVCUserRoles.Repositories; 
using shanuMVCUserRoles.ViewModels; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace shanuMVCUserRoles.Models 
{ 
    public class CheckOutController : Controller 
    { 
     private readonly ApplicationDbContext db; 
     public CheckOutController() 
     { 
      db = new ApplicationDbContext(); 
     } 

     [Route("Index")] 
     [HttpGet] 
     public ActionResult Index() 
     { 
      var content = db.Checkouts.Select(s => new 
      { 
       s.ID, 
       s.CandidateId, 
       s.Image, 
      }); 

      List<CheckOutViewModel> contentModel = content.Select(item => new CheckOutViewModel() 
      { 
       ID = item.ID, 
       CandidateId = item.CandidateId, 
       Image = item.Image, 
      }).ToList(); 
      return View(contentModel); 
     } 


     public ActionResult RetrieveImage(int id) 
     { 
      byte[] cover = GetImageFromDataBase(id); 
      if (cover != null) 
      { 
       return File(cover, "image/jpg"); 
      } 
      else 
      { 
       return null; 
      } 
     } 

     public byte[] GetImageFromDataBase(int Id) 
     { 
      var q = from temp in db.Checkouts where temp.ID == Id select temp.Image; 
      byte[] cover = q.First(); 
      return cover; 
     } 

     // GET: CheckOut 
     [Authorize] 
     public ActionResult Create() 
     { 
      return View(); 
     } 

     [Route("Create")] 
     [HttpPost] 
     public ActionResult Create(CheckOutViewModel model) 
     { 
      HttpPostedFileBase file = Request.Files["ImageData"]; 
      CheckOutRepository service = new CheckOutRepository(); 
      int i = service.UploadImageInDataBase(file, model); 
      if (i == 1) 
      { 
       return RedirectToAction("Index"); 
      } 
      return View(model); 
     } 

    } 

} 

そして私はまた、リポジトリ・データベース内の画像とのフィールドを保存するフォルダとバイトに変換された画像のための方法を作成しました。

CheckoutRepostiory.cs

public class CheckOutRepository 
{ 
    private readonly ApplicationDbContext db; 
    public CheckOutRepository() 
    { 
     db = new ApplicationDbContext(); 
    } 
    public int UploadImageInDataBase(HttpPostedFileBase file, CheckOutViewModel contentViewModel) 
    { 
     contentViewModel.Image = ConvertToBytes(file); 
     var userId = HttpContext.Current.User.Identity.GetUserId(); 
     var member = db.Users.Single(u => u.Id == userId); 
     var Content = new CheckOut 
     { 
      CandidateId = member, 
      Image = contentViewModel.Image 
     }; 
     db.Checkouts.Add(Content); 
     int i = db.SaveChanges(); 
     if (i == 1) 
     { 
      return 1; 
     } 
     else 
     { 
      return 0; 
     } 
    } 
    public byte[] ConvertToBytes(HttpPostedFileBase image) 
    { 
     byte[] imageBytes = null; 
     BinaryReader reader = new BinaryReader(image.InputStream); 
     imageBytes = reader.ReadBytes((int)image.ContentLength); 
     return imageBytes; 
    } 
} 

また、私は、インデックス・ビューを作成し、私は、各ループのために用いた画像タグに画像を配置しました。

Index.cshtml

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
      <img src="/Content/RetrieveImage/@item.ID" alt="" height=100 width=200 /> 
     </td> 
    </tr> 
} 

Answer 1

これが動作する可能性のようなもの...あなたがあなたのモデルオブジェクトの画像バイトを持っている場合

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
     @{ 
      var base64 = Convert.ToBase64String(item.Image); 
      var imgSrc = String.Format("data:image/gif;base64,{0}", base64); 
      } 
     <img src="@imgSrc" alt="" height=100 width=200 /> 
     </td> 
    </tr> 
} 

または

<img src="data:image;base64,@System.Convert.ToBase64String(item.Image)" width="200" height="100"/> 

が、それはあなたが与える必要が

Answer 2

私は1つの代替解決策を持っている： VARCHAR2 としてフィールドを設定し、その上に文字列のパスとして、あなたの画像を保存するために、データベースのテーブルを変更：

続いた後、あなたは同じ変更を、MODELだけでなく必要な場所でも実行できます。

public class CheckOutViewModel 
{ 
    public int ID { get; set; } 
    public ApplicationUser CandidateId { get; set; } 
    [Required] 
    public string Image { get; set; } 
}