ASP.NET MVC - 如何从数据库中检索图像列表并在视图中显示它们？ [英] ASP.NET MVC - How to Retrieve a list of images from the Database and display them in the view?

问题描述

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



** ViewModel：**

I would like to retrieve a list of images from the database and display them on the view. All the images are stored in ''image'' data type format in the database. Below are my controller, view model, and View. I''m not sure if it is correct, so please help. I''ve just used Linq2SQL since it''s just a sample project. Please correct my code, and help me how to display a list of images on the view. I''m just a beginner, so it''d be great if you could please keep the solution straight and simple.

**ViewModel:**

public class ImageViewModel
 {
     public byte[] Image { get; set; }
     public MemoryStream Imagestream { get; set; }
 }

**控制器：**

**Controller:**

public ActionResult Index()
{
    DataAccess.DataClasses1DataContext ctx = new DataAccess.DataClasses1DataContext();

    using (ctx)
    {
        var db = (from q in ctx.tblImages
                  select new Models.ImageViewModel
                  {
                      Image = q.ImageData.ToArray()
                  }).ToList().Take(5);

        List<Models.ImageViewModel> ImagesList= new List<Models.ImageViewModel>();

        foreach (var item in db)
        {
            var stream = new MemoryStream(item.image);
            Models.ImageViewModel obj = new Models.ImageViewModel();
            obj.Imagestream = stream;
            ImagesList.Add(obj);
        }

        return View(ImagesList);
    }
}

**查看：**

**View:**

@model IEnumerable<MvcApplication3.Models.ImageViewModel>

   @foreach (var item in Model)
   {
       <img src ="@(item.Imagestream).png" />
   }

推荐答案

使用

Use

<img src="data:image/gif;base64,@ViewBag.Image" alt="Alternate Text" />

图片路径应为Base64字符串，并以数据前缀：image / jpg; base64，



在Controller中我已经为ViewBag.Image指定了64位字符串

Image path should be Base64 string and prepend it with data:image/jpg;base64,

In Controller i have assigned base 64 string to ViewBag.Image

var imageString = Convert.ToBase64String(System.IO.File.ReadAllBytes(@"C:\temp\temp.jpg"));

因此，在您的情况下，将ImageStream转换为base64数组，以便将for循环分配给图像源。

在jsFiddle上查看此链接

http://jsfiddle.net/A8BjU/ [ ^ ]

来自 patel_vijay 的解决方案是正确的，但是有一些要注意的地方：



- 如果你有很多图片，那么生成的html文件将是巨大的

- 如果数据直接呈现到html文档中，浏览器就没有机会决定它是否应该加载图像或者不是b $ b - 这可能导致页面在浏览器中缓慢增加互联网连接较慢



在我看来，更好的解决方案是只提供图像ID并创建一个n图像控制器和传送单个图像的动作。



如果您将所有图像存储在数据库中，请记住每个图像动作调用将导致数据库连接。所以在这里我将实现一些缓存机制来将已经加载的图像存储在内存或磁盘上。另外，如果你已经知道哪些图像必须很快交付，你可以从数据库中预加载图像（就像你目前通过将所有图像放在一个记录集中一样）。



希望这会有所帮助。



祝你好运，一如既往：快乐的编码，

Chris

Hi,

The solution from patel_vijay is correct, but there are some points to be aware of:

- if you have lots of images, the resulting html-document will be huge
- if the data is directly rendered into the html-document, the browser have no chance of deciding wether it should load the images or not
- this could led to a slow-buildup of your page in a browser with a slower internet connection

In my opinion, a better solution would be to deliver only image ID''s and create an image-controller and a action to deliver a single image.

If you have all your images stored in a database, keep in mind that every single image-action call will cause a DB-connection. So here I would implement some caching mechanism to store the already loaded images in memory or on disk. Additionaly, you can preload the images from the DB (as you do it currently by getting all images in one recordset) if you already know which images must be delivered soon.

Hope this helps.

Best regards and as always: happy coding,
Chris

这篇关于ASP.NET MVC - 如何从数据库中检索图像列表并在视图中显示它们？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！