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

Question

我想从数据库中检索图像列表并将它们显示在视图上。所有图像都以“图像”数据类型格式存储在数据库中。下面是我的控制器、视图模型和视图。我不确定它是否正确，所以请帮忙。我刚刚使用了 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)" />
}

Answer 1

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

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

然后，当您需要显示数据库中的图像时，您可以像这样设置源

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

Answer 2

布里顿也推荐了这个，但我会重申。

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

这是我的意思的一个非常粗略的例子。我还没有对此进行测试以确保它可以编译，但它应该让您大致了解如何执行此操作。

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})">
}

Answer 3

我不确定您是否将数据作为 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/