在 Razor/MVC3 中显示数据库图像(字节 [])? [英] Displaying database image (bytes[]) in Razor/MVC3?

问题描述

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

I am returning a dataset from my MS SQL 2008R2 database that contains a datatable that I am already getting data from on my Razor view. I added a byte[] field that contains an image thumbnail that I am trying to display on that view.

由于字节数组相对较小，我想我会尝试内联显示字节数组.不过看了之后可能有些浏览器的问题，我放弃了.

Since the byte array is relatively tiny, I figured I would try displaying the byte array inline. However, after reading there may be some browser-related issues, I abandoned this.

创建控制器方法似乎是可行的方法，(两种方法都找到了here)，但是我已经准备好字节数组以供查看，并且不需要进行另一个 db 调用来根据 ID 获取它.

Creating a controller method seemed the way to go, (both methods found here), however I already have the byte array ready to go on my view, and don't need to make another db call to get it based on an ID.

这样做，显然是行不通的:

Doing this, doesn't work for obvious reasons:

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

... displaying other data on the page ....

@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 发送字节数组.

... as this essentially is attempting to send the byte array over http.

所以，我的问题是，由于我的 Razor 视图上已经有了字节数组，我该如何显示它?

So, my question is, since I already have the byte array on my Razor view, how do I display it?

-- 更新 --

我意识到不建议在视图中进行处理，但由于数据已经存在，因此不能做这样的事情:

I realize that doing processing in the view isn't recommended, but since the data is already there, can't something like this be done:

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[]...)) 但这在这种情况下不起作用.

In other postings I've read that you an do a Response.Write(byte[]...)) but this doesn't work in this case.

-- 更新 --

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

In my ongoing search for efficiency (not having to make another request to the db) the WebImage helper seems to be a good candidate. One of its constructors will accept a byte array to initialize the class, then using the .Write("jpeg") method, I can see the image.

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

使用 WebImage.Write() 的问题是，一旦使用，图像是唯一呈现在页面上的东西.有没有办法将它直接呈现给 Razor 视图页面上的控件"?

The problem with using WebImage.Write() is that once used, the image is the only thing that renders on the page. Is there a way to render this directly to a "control" on a Razor view page?

-- 更新 --

这仍然困扰着我...所以我尝试了以下操作，我认为这可能有效，因为这是我们从 Action 中所做的...

This continues to bug me... so I tried the following, which I figured may work, since this is what we're doing from the 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>
}

...不起作用.

推荐答案

最终，我选择了两趟路线.非常低效，因为图像字节已经准备好进入视图.应该有一个 web helper 图像控件，它将直接从图像的字节数组(或图像类型)渲染图像.也许有，但我错过了.

Eventually, I went for the two trips route. Highly inefficient, as the image bytes were already ready to go on the view. There should be a web helper image control that will render the image directly from the image's byte array (or image type). Maybe there is and I missed it.

获取字节(是的，从头再来):

To get the bytes (yes, all over again):

    [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 中放置以下路由:

With the following route placed in Global.asax:

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

这篇关于在 Razor/MVC3 中显示数据库图像(字节 [])?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！