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

Last Reply on Aug 16, 2018 03:59 AM By dharmendr

Posted on Aug 16, 2018 03:13 AM

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 on Aug 16, 2018 03:48 AM
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 on Aug 16, 2018 03:59 AM

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