如何在MVC列表中顯示圖像？

Question

我是最後一年的學生，從事五年規劃，我有一個關於在二進制數據中存儲圖像的問題。我嘗試了很多解決方案，我在Google上搜索過，但沒有解決任何問題。

查看

@model IEnumerable<PictureServices.Picture> 
@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
<tr> 
    @foreach (var item in Model) 
     { 
     <td> 
      @{ 
       var base64 = Convert.ToBase64String(item.image); 
       var imgsrc = string.Format("data:image/jpg;base64,{0}", base64); 
      } 
      <img src='@imgsrc' style="max-width:100px; max-height:100px;"> 
     </td> 

模型

public class Picture 
{ 
    public int id { get; set; } 

    public byte[] image { get; set; } 

    public string name { get; set; } 
} 

控制器

public class CarServicesController : Controller 
{ 

    TestingEntities db = new TestingEntities(); 


    public ActionResult Index() 
    { 
     Picture ds = new Picture(); 
     var item = (from d in db.Pictures 
        select d).ToList(); 

     return View(item); 

    } 

Answer 1

可以轉換字節數組到基座64串並使用它作爲圖像源。您可以使用Convert.ToBase64String來執行此操作。你必須做的一件事是在嘗試轉換字節數組之前檢查null，因爲它可能爲空。

@model IEnumerable<PictureServices.Picture>  
<table class="table table-striped"> 
@foreach (var r in Model) 
{ 
    <tr> 
     <td>@r.Id</td> 
     <td>@r.Name</td> 
     <td> 
      @if (r.Image != null) 
      { 
       var imgSrc = $"data:image/jpg;base64,{Convert.ToBase64String(r.Image)}"; 
       <img src="@imgSrc" alt="@r.Name" /> 
      } 
     </td> 
    </tr> 
} 
</table> 

我也建議使用PascalCasing爲C＃類特性（Name代替name）。