如何在 MVC 中显示图像答案

【问题标题】：How to display images in MVC如何在 MVC 中显示图像
【发布时间】：2015-06-04 18:34:04
【问题描述】：

我已在项目的“内容/学生/照片”文件夹中成功上传照片，但无法在索引视图中显示。

这是我的短代码：

型号：

public string FirstName { get; set; }

[Display(Name = "Upload Image")]

[NotMapped]

public HttpPostedFileBase Photo { get; set; }

索引视图（用于显示）：

@Html.DisplayNameFor(model => model.FirstName)

@Html.DisplayNameFor(model => model.Photo)

@foreach (var item in Model)

{

 @Html.DisplayFor(modelItem => item.FirstName)

   @Html.DisplayFor(modelItem => item.Photo)

 }

应该在索引视图中进行哪些更改？

【问题讨论】：

您遇到了什么问题？根据您的问题/代码尚不清楚。
我想在索引视图中显示照片..@sir
你不能使用HttpPostedFileBase，我相信那是为了上传。您需要使用图片的 url 并将其放入元素中：how to display image from path in asp.net mvc 4 and razor view
是的，我使用 HttpPostedFileBase 进行上传。但是如何在视图中显示照片？？
您是想让用户在上传到服务器之前选择并显示图像，还是尝试上传、保存到磁盘然后在视图中显示该图像？如果是后者，请按照我提供的链接进行操作，因为它在那里进行了解释。如果是前者，我认为您必须先上传到服务器并返回图片的一些网址：Is there any way to display image in client browser without uploading it to server?

标签： asp.net-mvc

【解决方案1】：

试试这个。

型号：

public byte[] ImageData { get; set; }

[HiddenInput(DisplayValue = false)]
public string ImageMimeType { get; set; }

查看：

@using (Html.BeginForm("Edit", "Admin", FormMethod.Post, 
new { enctype = "multipart/form-data" })) {

@Html.EditorForModel()
    <div class="editor-label">Image</div>
        <div class="editor-field">
            @if (Model.ImageData == null) {
                @:None
            } else {
                <img width="150" height="150"
            src="@Url.Action("GetImage", "Product", new { Model.ProductID })" />
            }
        <div>Upload new image: <input type="file" name="Image" /></div>
    </div>        
    <input type="submit" value="Save" />
    @Html.ActionLink("Cancel and return to List", "Index")
}

控制器：

[HttpPost]
public ActionResult Edit(Product product, HttpPostedFileBase image) {
if (ModelState.IsValid) {
    if (image != null) {
        product.ImageMimeType = image.ContentType;
        product.ImageData = new byte[image.ContentLength];
        image.InputStream.Read(product.ImageData, 0, image.ContentLength);
    }
    repository.SaveProduct(product);
    TempData["message"] = string.Format("{0} has been saved", product.Name);
    return RedirectToAction("Index");
    } else {
        // there is something wrong with the data values
        return View(product);
    }
}


public void SaveProduct(Product product) {
    if (product.ProductID == 0) {
        context.Products.Add(product);
    } else {
        Product dbEntry = context.Products.Find(product.ProductID);
        if (dbEntry != null) {
        dbEntry.Name = product.Name;
        dbEntry.Description = product.Description;
        dbEntry.Price = product.Price;
        dbEntry.Category = product.Category;
        dbEntry.ImageData = product.ImageData;
        dbEntry.ImageMimeType = product.ImageMimeType;
        }
    }
    context.SaveChanges();
}


public FileContentResult GetImage(int productId) {
    Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productId);
    if (prod != null) {
        return File(prod.ImageData, prod.ImageMimeType);
    } else {
        return null;
    }
}

希望这会有所帮助...

【讨论】：