使用EntityFramework在Index.cshtml頁面上顯示圖像

Question

我有這個：

控制器：

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {


                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                path = Url.Content(Path.Combine("~/~/App_Data/uploads", fileName));
                file.SaveAs(path);
            }



            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);


                user.FirstName = userprofile.FirstName;
                user.LastName = userprofile.LastName;
                user.Email = userprofile.Email;
                user.Motto = userprofile.Motto;

                user.PlaceOfBirth = userprofile.PlaceOfBirth;
                user.HowManyBikes = userprofile.HowManyBikes;
                user.BesideYourBeth = userprofile.BesideYourBeth;
                user.NicestRide = userprofile.NicestRide;
                user.WorstRide = userprofile.WorstRide;
                user.AmountKmPerYear = userprofile.AmountKmPerYear;
                user.AverageSpeed = userprofile.AverageSpeed;
                user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
                user.PhoneNumber = userprofile.PhoneNumber;

                db.Entry(user).State = EntityState.Modified;

                db.SaveChanges();

                return RedirectToAction("Edit", "Account");
            }

            return View(userprofile);
        }

並查看：

@foreach (var item in Model)
            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.LastName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.FirstName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Motto)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.PlaceOfBirth)
                                    </td>

                                    <td><img width="200px" height="150px" src="@Url.Content(item.Image)" /></td>



                                    <td>

                                        @Html.ActionLink("Details", "Details", new { id = item.Id })

                                    </td>
                                </tr>
            }

                        </table>
                    </div>
                </div>
                <br />
                Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

                @Html.PagedListPager(Model, page => Url.Action("Index",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

因此，我想在索引文件中以縮略圖形式顯示圖像。 該圖像已經保存在數據庫中，我嘗試顯示如下圖像： <td><img width="200px" height="150px" src="@Url.Content(item.Image)" /></td>但這不起作用。

謝謝您的幫助

我有索引，像這樣：

 @foreach (var item in Model)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.LastName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.FirstName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Motto)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.PlaceOfBirth)
                                    </td>

                                    <td>
                                        <img width="200" height="150" src="@Url.Action("GetImage", "Account", new { item.Id })">
                                    </td>



                                    <td>

                                        @Html.ActionLink("Details", "Details", new { id = item.Id })

                                    </td>
                                </tr>
            }

但我看到的是chrome，卻看到了img 74x22的尺寸，這也很奇怪，因為圖像來自：

img {
background-image: url('../Images/Large.JPG');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
width: 100%;
height: 100%;

因此，對於每個配置文件，圖像都是相同的，但是圖像存儲在：〜/ App_Data / uploads中。

恩，我取消了site.css中的img {}的注釋，現在我看到了正確的尺寸，但是圖像壞了

GET http://localhost:41787/Account/GetImage/34 500 (Internal Server Error) Account:179
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 

accountController現在看起來是這樣的：

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {


                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
               // path = Url.Content(Path.Combine("~/~/App_Data/uploads", fileName));
                file.SaveAs(path);
            }



            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);
                user.ImageMimeType = file.ContentType;


                user.FirstName = userprofile.FirstName;
                user.LastName = userprofile.LastName;
                user.Email = userprofile.Email;
                user.Motto = userprofile.Motto;

                user.PlaceOfBirth = userprofile.PlaceOfBirth;
                user.HowManyBikes = userprofile.HowManyBikes;
                user.BesideYourBeth = userprofile.BesideYourBeth;
                user.NicestRide = userprofile.NicestRide;
                user.WorstRide = userprofile.WorstRide;
                user.AmountKmPerYear = userprofile.AmountKmPerYear;
                user.AverageSpeed = userprofile.AverageSpeed;
                user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
                user.PhoneNumber = userprofile.PhoneNumber;

                db.Entry(user).State = EntityState.Modified;

                db.SaveChanges();

                return RedirectToAction("Edit", "Account");
            }

            return View(userprofile);
        }

        public FileContentResult GetImage(int itemId)
        {
            UserProfile user = db.userProfiles.FirstOrDefault(u => u.Id.Equals(itemId));
            if (user != null)
                return File(user.Image, user.ImageMimeType);
            else return null;
        }

和視圖（Index.cshtml）：

@foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.LastName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.FirstName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Motto)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.PlaceOfBirth)
                                </td>

                                <td>
                                    <img width="200" height="150" src='@Url.Action("GetImage", "Account", new { item.Id  }, Request.Url.Scheme)'>
                                </td>



                                <td>

                                    @Html.ActionLink("Details", "Details", new { id = item.Id })

                                </td>
                            </tr>
        }

但這是正確的嗎？

<td>
                                        <img alt="" src="@Url.Action("GetImage", "Account", new {item.Id })" width="200" height="150"  class="Image" />
                                    </td>

Answer 1

代替

<img width="200px" height="150px" src="@Url.Content(item.Image)" />

放

<img width="200px" height="150px" src="@Url.Action("GetImage", "Account", new { item.Id })

在您的帳戶控制器中添加以下方法：

public FileContentResult GetImage(int itemId)
{
UserProfile user = db.userProfiles.FirstOrDefault(u => u.Id.Equals(itemId));
if(user != null)
return File(user.Image, user.ImageMimeType);
else return null;
}

您必須向用戶表ImageMimeType添加新字段。

在這個部分

// Update fields
user.Image = new byte[file.ContentLength];
file.InputStream.Read(user.Image, 0, file.ContentLength);

加

user.ImageMimeType = file.ContentType;

就是這樣。

希望能幫助到你。