使用视图模型MVC 5从数据库显示图像 [英] Display Image from Database Using View Models MVC 5

问题描述

我正在使用Visual Studio 2013 mvc 5的内置模板.我试图将保存在数据库中的图像显示到主页的索引视图中.

Am working with the built-in template of visual studio 2013 mvc 5. am trying to display images i saved in the database to the index view of the home page.

突出显示的黄色区域是我要显示图像的位置

这是我要从数据库中显示的图像的视图模型

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>

推荐答案

您不能直接将图像数据输出到视图.您需要执行一项操作以从数据库中获取图像数据并作为响应将其返回.然后，在您的视图中，可以添加一个<img>标记，该标记引用此操作的URL.

You can't directly output image data to a view. You need an action to get the image data from the database and return it as a response. Then, in your view, you can add an <img> tag that references the URL to this action.

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>标签将其加载到页面上，例如:

Alternatively, you could use Data URIs, but you would need to convert the image to a byte array first (if it's not a byte array already) and then base64 encode it. Then you could load it on the page with an <img> tag like:

<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文档.

Where [mimetype] is the image's mime type (image/jpeg, for example) and [data] is the base64 encoded byte array. However, bear in mind that Data URIs are not supported in all versions of IE and even then, a Data URI will be much larger than the image itself. For example, a test image that's 44 KB was 62 KB as a Data URI. The exact size difference will depend on the image, but it will always be larger than the image file itself due to the base64 encoding. Additionally, since a Data URI is included in the HTML document itself, that means your initial payload is much larger as well, adding to the response and rendering time. With a typical image reference, the browser can render the HTML document and then fill in the images once those have completed downloading, but as Data URIs, the HTML document cannot be rendered until all the image data within it has been downloaded.

这篇关于使用视图模型MVC 5从数据库显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！