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

2

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

answered Jan 2, 2016 at 8:24

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

0

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.

answered Jan 2, 2016 at 5:37

Jonathon Chase

9,70426 silver badges42 bronze badges

Comments

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

0

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

answered Jan 2, 2016 at 8:30

Pooria

15711 bronze badges

Collectives™ on Stack Overflow

Uploading and displaying multiple images from database in MVC

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related