ASP.NET MVC - How to Retrieve a list of images from the Database and display them in the view?

Question

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 18-Apr-13 4:05am

devdev13

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

vijay__p · Accepted Answer · 2013-04-18T06:08:00

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/[^]

Christoph Keller · Accepted Answer · 2013-04-24T10:55:00

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 - How to Retrieve a list of images from the Database and display them in the view?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0