0

I'm new to asp.net mvc and now im having trouble adding and retrieving images from database. I think the adding is fine, its when reading back the images that's the problem. It always show chrome broken image icon.

Here's my database table configuration:

CREATE TABLE [dbo].[Image](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [img] [varbinary](max) NULL,
 CONSTRAINT [PK_Image] PRIMARY KEY CLUSTERED 
(
    [id] ASC
)

Here's my controller:

public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Image image = db.Images.Find(id);
            if (image == null)
            {
                return HttpNotFound();
            }
            return View(image); 
        }

        public ActionResult Show(int id)
        {
            var imageData = db.Images.Find(id).img;
            return File(imageData, "image/jpg");
        }
public ActionResult Create()
        {
            Image image = new Image();
            return View(image);
        }

        [HttpPost]        
        public ActionResult Create(Image image, HttpPostedFileBase file1)
        {
            if(file1 != null)
            {
                image.img = new byte[file1.ContentLength];
                file1.InputStream.Read(image.img, 0, file1.ContentLength);
            }
            db.Images.Add(image);
            db.SaveChanges();
            return View(image);
        }

Here's my detail view:

    @model Project1.Models.Image

    @{
        ViewBag.Title = "Details";

}

    <h2>Details</h2>

    <div>
        <h4>Image</h4>
        <hr />
        <img src='@Url.Action( "Show", "Image", new { id = Model.id } )' />    
    </div>

and my create view:

@model Project1.Models.Image

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm("Create", "Images", FormMethod.Post, new { enctype="multipart/form-data"}))
{    
    <div class="form-horizontal">
        <h4>Image</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.img, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" id="file1" name="file1"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
halfer
  • 19,824
  • 17
  • 99
  • 186
m5kev4n
  • 541
  • 1
  • 8
  • 20
  • Possible duplicate of [MVC How to display a byte array image from model](https://stackoverflow.com/questions/17952514/mvc-how-to-display-a-byte-array-image-from-model) – Fran Feb 23 '18 at 18:17
  • @Fran really? I'll try the solution n get back to u :) – m5kev4n Feb 23 '18 at 18:25
  • @AcousticMike mate your code works like a charm. The problem lies in the Url.Action. You use the wrong route. (Your controller is called Images as i can see by your create view.) – Nick Polyderopoulos Feb 23 '18 at 20:22
  • @NickPolideropoulos lol can't believe i missed that. thanks man, but now that it's correct. it doesn't show the image as i intended. it shows the image as flipped 90°. u kno how i can get it to show without being flipped? – m5kev4n Feb 24 '18 at 01:06
  • @AcousticMike If the image was originally flipped it will show it as flipped now. You can use some image library like the microsoft's [System.Drawing.Image.RotateFlip](https://msdn.microsoft.com/en-us/library/system.drawing.image.rotateflip(v=vs.110).aspx) or a cross platform library like [ImageSharp](https://sixlabors.com/projects/imagesharp/) – Nick Polyderopoulos Feb 24 '18 at 07:32
  • @NickPolideropoulos the original photo wasnt flipped. i dont kno why it shows as flipped. but ill try to use the library – m5kev4n Feb 24 '18 at 08:14

0 Answers0