How to show images from a folder using Razor MVC?

Question

I am using Razor MVC and I would like to show images from "~/Content/uploads" folder. I came up with the following solution:

@foreach (FileInfo fileInfo in (new DirectoryInfo(Server.MapPath("~/Content/uploads"))
                                    .GetFiles().Where(x => x.Extension == ".jpg"))) {
    <img src="/@fileInfo
               .FullName
               .Substring(Server.MapPath("~/").Length)
               .Replace("\\", "/")"
         width="100">
}

The problem with the code is that I am taking the full file path and I am removing the Server.MapPath() prefix.

How can I simplify this code?

If possible, either accept the answer you have found appropriate or post the solution, if you have came across other than the answers posted here. — Vikram, Jun 09 '14 at 21:49

score 19 · Answer 1 · answered Feb 09 '14 at 12:57

19

You can use the UrlHelper class that is available on Razor pages.

@foreach (var imgPath in Directory.GetFiles(Server.MapPath("~/Content/uploads"), "*.jpg"))
{
    var img = new FileInfo(imgPath);
    <img src="@Url.Content(String.Format("~/Content/uploads/{0}", img.Name))" />
}

answered Feb 09 '14 at 12:57

Rowan Freeman

15,724
11
69
100

Good one. Worked for me! – Vikram Jun 09 '14 at 21:51

score 2 · Answer 2 · edited May 23 '17 at 11:54

@Rowan Freeman answer helped me for jpg image file. But This is for multiple files:

View images with multiple filters

@{

string supportedExtensions = "*.jpg,*.gif,*.png,*.bmp,*.jpe,*.jpeg,*.ico";

foreach (string imgPath in Directory.GetFiles(Server.MapPath("~/images/store/"), "*.*", 
SearchOption.AllDirectories).Where(s => supportedExtensions.Contains(Path.GetExtension(s)
.ToLower())))
{
    var img = new FileInfo(imgPath);
    <img style="width: 200px; height: 200px;" src="@Url.Content(String.Format("~/images/
    store/{0}", img.Name))" />
}

}

Hope helps some one.

Reference

How to show images from a folder using Razor MVC?

2 Answers2

Linked