在ASP MVC中显示数据库中的图像


67

我正在从控制器获取字节数组格式的图像,如何在视图中显示它?以最简单的方式。

Answers:


124

创建一个用于使用Show操作显示图像的控制器,该操作采取要从数据库显示的图像ID。该操作应返回一个FileResult,其中包含具有适当内容类型的图像数据。

public class ImageController : Controller
{
    public ActionResult Show( int id )
    {
        var imageData = ...get bytes from database...

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

在您的视图中,构造图像,并使用图像ID使用控制器和操作为图像构造路径。

<img src='<%= Url.Action( "show", "image", new { id = ViewData["imageID"] } ) %>' />

1
错误:无法创建静态类'System.IO.File'的实例
Jeremy Knees 2014年

1
该类应该派生自@JeremyKnees Controller(已修复该问题)。 File是上的方法Controller
tvanfosson

如果您使用的是HomeController,则View中应返回什么ActionResult Show()?
Moojjoo 2014年

9

使用此方法的公认答案:

<img src='<%= Url.Action( "show", "image", new { id = ViewData["imageID"] } ) %>'

很好,但是对于mvc 4已经过时了。更新后的语法现在应显示为:

<img src='@Url.Action( "show", "image", new { id = ViewData["imageID"] })' />

另外,我发现当我需要此功能时,我已经将其他数据传递给了视图,因此使用Model代替ViewData很好。

public class MyModel {
    public string SomeData {get;set;}
    public int FileId {get; set;}
}

从您的控制器:

public ActionResult Index() {
    MyEntity entity = fetchEntity();

    MyModel model = new MyModel {
        SomeData = entity.Data,
        FileId = entity.SomeFile.ID
    };

    return View(model);
}

最后从您的角度来看:

<img src='@Url.Action("show", "image", new { id = Model.FileId })' />

控制器上用于接受答案的“显示”方法将起作用,但我将硬编码的“图像/ jpg”更改为使用File.ContentType-您可以将其与byte []一起存储,因此您无需猜测是否用户正在上传自己的图像。


4

我知道这篇文章比较老,但这是我试图弄清楚大部分情况下如何做到这一点的第一篇文章。Augi的回答是正确的,但是大多数程序集都过时了

  1. 我下载了mvc2预览1

  2. 无需担心microsoft.web.mvc的东西,我无论如何也找不到任何东西,并搜索了约一个小时,试图弄清楚它演变成什么东西

这是我编写的代码,适用于显示来自image类型的db字段的图像

在我称为存储的控制器类中,我有这个

public ActionResult GetImage(int id)
{
    byte[] imageData = storeRepository.ReturnImage(id);

    //instead of what augi wrote using the binarystreamresult this was the closest thing i found so i am assuming that this is what it evolved into 
    return new FileStreamResult(new System.IO.MemoryStream(imageData), "image/jpeg");
}

//in my repository class where i have all the methods for accessing data i have this

public byte[] ReturnImage(int id)
{
    // i tried his way of selecting the right record and preforming the toArray method in the return statment 
    // but it kept giving me an error about converting linq.binary to byte[] tried a cast that didnt work so i came up with this
    byte[] imageData = GetProduct(id).ProductImage.ToArray();
    return imageData;
}

现在在我的查看页面上,我尝试了各种方式以这些形式找到的东西,但我认为它们只是过时了而没有用,所以我一时兴起尝试了所有我能想到的最简单的方法,并且效果很好

<image src='/store/getimage/<%= Html.Encode(Model.productID) %>' alt="" />

我不断从网站上收到有关发布img标签的错误,因此请确保将以上图片更改为img

希望能帮助阻止任何人整日寻找当前答案

http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=30886


3

这里的每个答案可能都是正确的,但是从我看来,最简单的方法是获取字节数组或包含图像的模型,并像这样简单地添加

<img  src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Picture))">

2
public ActionResult EmployeeImage(int id)
{
    byte[] imageData ="Retrieve your Byte[] data from database";
    if (imageData!= null && imageData.Length > 0)
    {
        return new FileStreamResult(new System.IO.MemoryStream(imageData), "image/jpeg");
    }
}

-2

假设您有一个dataRow(dr),其中有两列“名称”和“ binary_image”(binary_image包含二进制信息)

 Byte[] bytes = (Byte[])dr["Data"];
 Response.Buffer = true;
 Response.Charset = "";

 Response.Cache.SetCacheability(HttpCacheability.NoCache);
 Response.ContentType = dr["Image/JPEG"].ToString();

 Response.AddHeader("content-disposition", "attachment;filename=" & dt.Rows[0]["Name"].ToString());

 Response.BinaryWrite(bytes);
 Response.Flush();
 Response.End(); 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.