How to display images in MVC

Question

I have uploaded photos successfully in "Content/Student/Photo" folder of my project but can't display them in Index view.

here is my short code:

Model:

public string FirstName { get; set; }

[Display(Name = "Upload Image")]

[NotMapped]

public HttpPostedFileBase Photo { get; set; }

Index View(for display):

@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)

 }

what changes should be made in the Index view??

What is the problem that you are getting? It isn't clear based on your question/code. — JasonWilczak, Jun 04 '15 at 18:40
You can't used HttpPostedFileBase, I believe that is for uploading. You need to use the url for the image and put it into an element: [how to display image from path in asp.net mvc 4 and razor view](http://stackoverflow.com/questions/15986980/how-to-display-image-from-path-in-asp-net-mvc-4-and-razor-view) — JasonWilczak, Jun 04 '15 at 18:44
Yes,i used HttpPostedFileBase for uploading.But how to display the photo in the view?? — Obak Shibly, Jun 04 '15 at 18:47
Are you trying to let the user select and show the image before uploading to the server OR are you trying to uploading, saving to disk and then show that image in a view? If it is the latter then follow the link i provided as it is explained there. If it is the former, I do not think you can without uploading to the server first and returning back some url for the image: [Is there any way to display image in client browser without uploading it to server?](http://stackoverflow.com/questions/771581/is-there-any-way-to-display-image-in-client-browser-without-uploading-it-to-serv) — JasonWilczak, Jun 04 '15 at 18:51

Murat Yıldız · Answer 1 · 2023-02-07T20:48:34.037

Try this.

Model:

public byte[] ImageData { get; set; }

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

View:

@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")
}

Controller:

[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;
    }
}

How to display images in MVC

1 Answers1

Linked