在Razor/MVC3中显示数据库映像(bytes [])？

Question

我从MS SQL 2008R2数据库返回一个数据集,该数据集包含一个数据表,我已经从我的Razor视图中获取数据.我添加了一个byte []字段,其中包含我试图在该视图上显示的图像缩略图.

由于字节数组相对较小,我想我会尝试内联显示字节数组.但是,在阅读后可能会出现一些与浏览器相关的问题,我放弃了这一点.

创建一个控制器方法似乎是要走的路(这里有两种方法),但是我已经准备好了我的视图上的字节数组,并且不需要再根据ID进行另一次数据库调用来获取它.

这样做,由于显而易见的原因不起作用:

...在页面上显示其他数据....

@if (Model.dsResults.Tables[0].Rows[i]["ImageBytes"] == null)
{
    <img src="@Url.Content("~/Content/Images/NoPhoto.png")" border="0" />
}
else
{
    <img src="@Url.Action("GetImage", "SearchResults", new { imageBytes = Model.dsResults.Tables[0].Rows[i]["ImageBytes"] })" alt="Product Image" />
}

...

控制器方法:

[Authorize]
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetImage(byte[] imageBytes)
{
    byte[] byteArray = imageBytes;
    return new FileContentResult(byteArray, "image/jpeg");
}

...因为这本质上是试图通过http发送字节数组.

所以,我的问题是,因为我的Razor视图中已经有字节数组,我该如何显示它？

- 更新 -

我意识到不建议在视图中进行处理,但由于数据已经存在,所以不能这样做:

Response.Write((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]);

要么...

Stream s = new MemoryStream(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]));
System.Drawing.Image img = new System.Drawing.Bitmap(s);

在其他帖子中,我已经读过你做了一个Response.Write(byte [] ...))但是在这种情况下这不起作用.

- 更新 -

在我不断寻求效率的过程中(不必向数据库发出另一个请求),WebImage助手似乎是一个很好的选择.它的一个构造函数将接受一个字节数组来初始化类,然后使用.Write("jpeg")方法,我可以看到图像.

<td>
    @{
        WebImage webImage = new WebImage(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]));
        webImage.Write("jpeg");
    }
</td>

使用WebImage.Write()的问题是,一旦使用,图像是唯一在页面上呈现的内容.有没有办法将它直接渲染到Razor视图页面上的"控件"？

- 更新 -

这继续让我感到烦恼......所以我尝试了以下,我认为这可能有用,因为这是我们从Action做的事情......

if (Model.dsResults.Tables[0].Rows[i]["ImageBytes"] != DBNull.Value)
{
    var img1 = new FileContentResult(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]), "image/jpeg");
    <text>
        <img src="@new FileContentResult(((byte[])Model.dsResults.Tables[0].Rows[i]["ImageBytes"]), "image/jpeg")" />
    </text>
}

......不起作用.

Answer 1

Model.Content是一个byte []图像.

@{
    string imageBase64 = Convert.ToBase64String(Model.Content);
    string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
}

像这样使用:

<img src="@imageSrc" alt="@Model.Name" width="100" height="100" />

Answer 2

最终,我去了两条路.效率非常低,因为图像字节已经准备好进入视图.应该有一个Web辅助图像控件,它将直接从图像的字节数组(或图像类型)渲染图像.也许有,我错过了它.

获取字节(是的,重新开始):

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult GetThumbnailImage(string itemListID)
    {
        byte[] imageBytes = null;

        client = new FeederServiceClient();
        imageBytes = client.GetItemThumbnail( itemListID );

        if (imageBytes == null)
        {
            return new FilePathResult("~/Content/Images/NoPhoto.png", "image/png");
        }
        else
        {
            return new FileContentResult(imageBytes, "image/jpeg");
        }
    }

然后显示图像:

<img src="@Url.Content("~/Thumbnails/" + @Model.dsResults.Tables[0].Rows[i]["ItemListID"] )" />

将以下路由放在Global.asax中:

routes.MapRoute(name: "Thumbnails", url: "Thumbnails/{itemListID}", defaults: new { controller = "Results", action = "GetThumbnailImage" });

Answer 3

我不认为你的视图中有一个字节数组会帮助你.您需要使用控制器操作作为链接答案中描述的img src .

[Authorize]
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Image(int id)
{
    byte[] byteArray = _imageRepository.GetImage(id);
    return new FileContentResult(byteArray, "image/jpeg");
}


<img src="Image/1234" alt="Image 1234"/>