使用視圖模型MVC 5從數據庫顯示圖像

Question

我正在使用Visual Studio 2013 MVC 5的內置模板。正在嘗試將我保存在數據庫中的圖像顯示到主頁的索引視圖中。

黃色突出顯示的部分是我要顯示圖像的位置

這是我要從數據庫中顯示的圖像的視圖模型

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; }

    }
}

這是我的家庭控制器索引方法中的代碼

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();
        }
    }
}

這是我在家庭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

您不能直接將圖像數據輸出到視圖。 您需要執行一項操作以從數據庫獲取圖像數據並作為響應將其返回。 然后，在您的視圖中，可以添加一個<img>標記，該標記引用此操作的URL。

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

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

然后：

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

另外，您可以使用Data URI，但是您需要先將圖像轉換為字節數組（如果還不是字節數組），然后將其進行base64編碼。 然后，您可以使用<img>標簽將其加載到頁面上，例如：

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

其中[mimetype]是圖像的mime類型（例如image/jpeg ）， [data]是base64編碼的字節數組。 但是，請記住，並非所有版本的IE都支持數據URI，即使那樣，數據URI也將比圖像本身大得多。 例如，一個44 KB的測試映像作為數據URI為62 KB。 確切的大小差異將取決於圖像，但是由於base64編碼，其大小總會大於圖像文件本身。 另外，由於HTML文檔本身包含數據URI，這意味着您的初始有效負載也大得多，從而增加了響應時間和渲染時間。 使用典型的圖像參考，瀏覽器可以呈現HTML文檔，然后在圖像完成下載后填寫圖像，但是作為數據URI，只有在文檔中的所有圖像數據都被下載后，HTML文檔才能呈現。