Image not showing in the asp.net MVC list View

Question

How to display images for each item in the list view? I have ImageName and ImagePath columns of nvarchar(MAX) type in my database. I can save nicely by using HttpPostedFileBase in view model. But while retrieving it in the list, no image showing!! Is there any other way for foreach loop, or I have a wrong syntax?

How can I fix this?

public partial class Course
{
    public int CourseId { get; set; }
    public string CourseTitle { get; set; }
    public string ImageName { get; set; }
    public Nullable<double> Price { get; set; }
    public string Description { get; set; }
    public string ImagePath { get; set; }
}

public class CourseViewModel
{
    public string CourseTitle { get; set; }
    public HttpPostedFileBase ImageFile { get; set; } 
    public Nullable<double> Price { get; set; }
    public string Description { get; set; }
    public string ImagePath { get; set; }
}

public ActionResult Index()
{
    var courses = db.Courses.ToList();
    return View(courses);
}

public ActionResult Create(FormCollection collection, CourseViewModel courseVM, HttpPostedFileBase ImageFile)
{
        try
        {
            if (!ModelState.IsValid)
            {
                return View(courseVM);
            }
            else
            {
                var image = ImageFile;

                if (image!=null && image.ContentLength>0)
                {
                    Course course = new Course();

                    var imageName = Path.GetFileName(image.FileName);
                    var imageExtention = Path.GetExtension(imageName);
                    imageName = imageName + DateTime.Now.ToString("yymmssfff") + imageExtention;
                    course.ImageName = imageName;

                    var imagePath = "~/App_Data/Images/" + imageName;
                    var path = Path.Combine(Server.MapPath("~/App_Data/Images/"), imageName);
                    image.SaveAs(path);

                    course.ImagePath = path;
                    course.CourseTitle = courseVM.CourseTitle;
                    course.Description = courseVM.Description;
                    course.Price = courseVM.Price;

                    db.Courses.Add(course);
                    db.SaveChanges();

                    return RedirectToAction("Index");
                }
                else
                {
                    return View(courseVM);
                }
            }
        }
        catch
        {
            return View();
        }
}        

This is my list view for the image column:

@model IEnumerable<MyProject.Models.Course>

@foreach (var item in Model) {
    <tr>

        <td>
            <img src="@Url.Content(item.ImagePath)" width="100" height="100" alt="Image" />

        </td>
    </tr>

Answer 1

The first thing I would look at is the text that is being written to the src="" attribute of your anchor tag. In Chrome, right-click the spot where the image should be and click "Inspect".

I suspect a malformed string here. The documentation on HttpPostedFileBase.FileName Property states that this returns "The name of the file on the client, which includes the directory path."