Display images from path stored in Database in View in ASP.Net MVC

Last Reply one year ago By dharmendr

Posted one year ago

want to show many images of single user in view

<div class="flexslider">
    <ul class="slides">
        <li data-thumb="@Url.Content(@Model.Image_Path)">
            <img src="@Url.Content(@Model.Image_Path)" />
        </li>
        <li data-thumb="@Url.Content(@Model.Image_Path)">
            <img src="@Url.Content(@Model.Image_Path)" />
        </li>
    </ul>
</div>

 

var imagelist = (from u in db.User_Images where u.User_id == userid
                 select u);
return View(imagelist);
Posted one year ago
mukesh1 says:
var imagelist = (from u in db.User_Images where u.User_id == userid
                            select u);
           return View(imagelist);

 Replace above with the below code.

var imagelist = (from u in db.User_Images where u.User_id == userid
                 select u).FirstOrDefault();
return View(imagelist);

Check the below example.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        TestEntities db = new TestEntities();
        var imagelist = (from u in db.FileImages
                            where u.ImageId == 1
                            select u).FirstOrDefault();
        return View(imagelist);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_Image_Path_DataBase.FileImage>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
</head>
<body>
    <div class="flexslider">
        <ul class="slides">
            <li data-thumb="<%: Url.Content(Model.ImagePath) %>">
                <img src="<%: Url.Content(Model.ImagePath) %>" />
            </li>
            <li data-thumb="<%: Url.Content(Model.ImagePath) %>">
                <img src="<%: Url.Content(Model.ImagePath) %>" />
            </li>
        </ul>
    </div>
</body>
</html>

Screenshot


Posted one year ago

Hi mukesh1,

If your result returns multiple image then refer the below code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        TestEntities db = new TestEntities();
        var imagelist = (from u in db.FileImages
                         where u.ImageId == 1
                         select u);
        return View(imagelist);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<_Image_Path_DataBase.FileImage>>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
</head>
<body>
    <div class="flexslider">
        <ul class="slides">
            <% foreach (var item in Model)
               { %>
            <li data-thumb="<%: Url.Content(item.ImagePath) %>">
                <img src="<%: Url.Content(item.ImagePath) %>" />
            </li>
            <% } %>
        </ul>
    </div>
</body>
</html>

Screenshot