Question

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

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

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

memmoryStram

这是我在家庭控制器索引方法中的代码

HttpContext.Response

这是我在index.sshtml主页中的代码

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

    }
}

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编码。然后，您可以使用<img>标记将其加载到页面上，如：

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

其中[mimetype]是图像的mime类型（例如image/jpeg），[data]是base64编码的字节数组。但是，请记住，IE的所有版本都不支持数据URI，即使这样，数据URI也会比图像本身大得多。例如，44 KB的测试图像为62 KB，作为数据URI。确切的大小差异将取决于图像，但由于base64编码，它总是大于图像文件本身。此外，由于数据URI包含在HTML文档本身中，这意味着您的初始有效负载也会大得多，从而增加了响应和渲染时间。使用典型的图像引用，浏览器可以呈现HTML文档，然后在完成下载后填写图像，但作为数据URI，HTML文档在其中的所有图像数据都已下载之前无法呈现。

使用View Models MVC 5从数据库显示图像

1 个答案: