Click here to Skip to main content
14,883,063 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:**

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

**Controller:**

C#
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:**

HTML
@model IEnumerable<MvcApplication3.Models.ImageViewModel>

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

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

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


So in your case convert ImageStream to base64 array in for loop assign to image source.
Check this link on jsFiddle
http://jsfiddle.net/A8BjU/[^]
   
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
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900