Uploading and displaying multiple images from database in MVC

Question

I am using ASP.NET MVC and I am trying to upload multiple images to a database and then display them in a view. I believe the upload process is working however when I try to display the images only the alternative text is being shown and a resource cannot be found error in the Chrome debugging.

This is how my image is displayed in my view

@model IList<InspectionPhoto> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Photo Management</h4> </div> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="modal-body"> <div class="form-horizontal"> @if (Model.Count > 0) { <div class="row"> @for (var i = 0; i < Model.Count(); i++) { <div class="row"> <div class="col-md-6"> <img src="@Url.Action( "ShowPhoto", "Inspection", new { id = Model[i].PhotoID } )" alt="Image not available" /> </div> //continues

Show Photo method:

public Bitmap ShowPhoto(int id) { InspectionPhoto image = db.InspectionPhotoes.Find(id); var result = (Bitmap)((new ImageConverter()).ConvertFrom(image.ImageBytes)); return result; }

The show photo method is in my Inspections controller because the Photo view is a modal partial view that is show when a button is clicked in the inspection view.

Any help would be greatly appreciated. Please let me know if more information is needed.

1) Have you set a breakpoint in your controller? 2) Is the name of the controller Inspection or Inspections? 3) In your view you are expecting an URL but your action method returns a bitmap... — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Jan 2, 2016 at 3:58

Ibrahim Khan · Accepted Answer · 2016-01-02 08:24:02Z

ShowPhoto returns Bitmap but should return File like following. If your your image is saved correctly then following should work fine.

public ActionResult ShowPhoto(int id) { InspectionPhoto image = db.InspectionPhotoes.Find(id); byte[] result = image.ImageBytes; return File(result, "image/png"); }

Jonathon Chase · Accepted Answer · 2016-01-02 05:37:21Z

Your ShowPhoto method is returning a Bitmap, which you are attempting to write in is the html's img src tag, which is expecting a url-string. You should modify the ShowPhoto function to instead return the url associated with the image that has been uploaded.

Pooria · Accepted Answer · 2016-01-02 08:30:13Z

I think you should return FileContent

 public FileContentResult GetImage(int id) { InspectionPhoto image = db.InspectionPhotoes.Find(id); byte[] byteArray = image.ImageBytes ; return byteArray != null ? new FileContentResult(byteArray, "image/jpeg") : null; }

Collectives™ on Stack Overflow

Uploading and displaying multiple images from database in MVC

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related