ASP.NET - 从数据库中检索图像列表并在视图中显示它们?

时间:2013-04-18 12:04:46

标签: c# .net asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

我想从数据库中检索图像列表并在视图中显示它们。所有图像都存储在'图像'数据库中的数据类型格式。下面是我的控制器,视图模型和视图。我不确定它是否正确,所以请帮忙。我刚刚使用过Linq2SQL,因为它只是一个示例项目。请更正我的代码,并帮助我如何在视图上显示图像列表。我只是一个初学者,所以如果你能保持解决方案简单直接,那就太棒了。

视图模型:

public class ImageViewModel
{
    public byte[] Image { get; set; }
    public int imageId { get; set; }
    public IEnumerable<int> imageList { get; set; }     
}

控制器: * (已更新并已解决) *

   public ActionResult Index()
{

    var imagesList = (from q in ctx.Images
                      select new Models.ImageViewModel
                      {
                      imageId = q.id
                      }).ToList();

    IEnumerable<int> imageIds = imagesList.Select(x=>x.imageId);
    Models.Test obj = new Models.Test();
    obj.imageList = imageIds;
    return View(obj);
}

    public ActionResult View(int imageId)
    {
        byte[] imageArray = (from q in ctx.Images
                             where q.id == imageId
                             select q.data.ToArray()).FirstOrDefault(); 
        return File (imageArray,"image/jpg");
    }

查看:

   @model MvcApplication3.Models.ImageViewModel

   @foreach (var id in Model.imageList)
{ 
    <img src="@Url.Action("View", "Home", new { imageId = id},null)" />
}

3 个答案:

答案 0 :(得分:4)

制作一个新的操作,为您的图片添加唯一标识符,使用该ID从您的数据库中获取byte[],然后将其直接写入响应流,如下所示

Response.ContentType = "content type of your image";
//filecontents is the byte[]
Response.BinaryWrite(filecontents);

然后,只要您需要显示数据库中的图像,就可以像这样设置源

<img src="/Controller/Action/ImageId"/>

答案 1 :(得分:1)

布里顿也推荐了这一点,但我会重申。

你应该有两个动作/视图来实现你想要的。一个用于检索单个图像,另一个是使用前面提到的操作检索单个图像的所有图像的列表。

这是我的意思的一个非常粗略的例子。我没有经过测试,以确保它能够编译,但它应该让你大致了解如何做到这一点。

class ImageLibrary
}
    public ActionResult List()
    {
        //I'm going to assume here you have some sort of service or repository for obtaining your images at this point.
        //This doesn't retrieve the actual image data, just the metadata. It's less of a hit on the DB this way
        var imagesList = imageService.ListAllImages()
        IEnumerable<int> imageIds = imagesList.Select(x=>x.ImageId)
        return View("List", imageIds)
    }

    public ActionResult View(int imageId)
    {
        var image = imageService.GetImage(imageId);

        var contentDisposition = new System.Net.Mime.ContentDisposition() { FileName = image.Name, Inline = true };
        Response.AppendHeader("Content-Disposition", contentDisposition.ToString());
        return File(image.Data, image.ContentType); //including content type since I'm assuming the image could be a jpg, gif, png, etc./
    }

}

ImageLibrary/List视图中。

@foreach(var id in Model)
{
    <img src="@Url.Action("View", "ImageLibrary", new {imageId = id})">
}

答案 2 :(得分:0)

我不确定您是否将数据作为base64字符串获取,如果是这样,您可以尝试:

<img src="data:image/png;base64,@(item.bitimage)" alt="test.png" />

尝试失败:

<img src="data:image/png;base64,@ToBase64String(item.bitimage)" alt="test.png" />

http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/