How to Display Image in MVC

Written By:- Isha Malhotra

Display Uploaded Image

In my last article I explained how to upload image using model in mvc. Now I am going to explain how to display this image.

Note: - kindly go through the uploading image code first as I am using same model and controller.

Now add an action in which fetch the data from the database and pass it to view. 

		
		public ActionResult showimage()
        {
            Employee emp = dc.GetTable<Employee>().Single(x => x.empid == 1);

            return View(emp);
        }

Now add view. I have created strongly type view with scaffolding details option. 

		
		add view
		Figure 1

Now check the following code

Code of View

		
		@model MvcApplication1.Models.Employee

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>showimage</title>
</head>
<body>
    <fieldset>
        <legend>Employee</legend>
    
        <div class="display-label">
             @Html.DisplayNameFor(model => model.name)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.name)
        </div>
    
        <div class="display-label">
             @Html.DisplayNameFor(model => model.user_image)
        </div>
        <div class="display-field">
            <img src="@Url.Content(Model.user_image)" alt="user image" />
        </div>
    </fieldset>
   
</body>
</html>

As you see that I have used Url.Content(Model.user_image)to display image. Now execute your code you will get your image.

Email Address

For any query you can mail me at info@techaltum.com