display image from database using filepath

Question

After i uploaded my image path succesfully to the database i attempted to display it in a grid. In the database i have a filepath like this c:\users\ibn hamza\documents\visual studio 2013\Projects\Blogger\Blogger\Uploads.

I attempted to display the images by doing this

@foreach (var item in Model)
{
    <img src="@item.FilePath" height="127" width="127"/>
}

"

when i built the solution i got an empty page without the images but with a placeholder. I inspected the placeholder and i got this path <img src="c:\users\ibn hamza\documents\visual studio 2013\Projects\Blogger\Blogger\Uploads\Lagos-20140103-00347.jpg" height="127" width="127">

I clicked on the path and got no image displayed. Please how do i correctly display the image. I would also provide the controller and the action to store the image

public ActionResult SaveUploadedFile(AddMediaVM model)
{
    if (ModelState.IsValid)
    {


        bool isSavedSuccessfully = true;

        foreach (string fileName in Request.Files)
        {

            var newFile = db.Media.Create();

            HttpPostedFileBase file = Request.Files[fileName];
            var filetype = Path.GetExtension(file.FileName).ToString();
            var filename = file.FileName;
            var filesize = file.ContentLength;
            var contenttype = file.ContentType;
            var FilePath = Server.MapPath("/Uploads");
            string SavedFileName = Path.Combine(FilePath, filename);
            file.SaveAs(SavedFileName);
            newFile.FileName = filename;
            newFile.FileSize = filesize;
            newFile.FileType = filetype;
            newFile.ContentType = contenttype;
            newFile.FilePath = SavedFileName;
            newFile.Description = model.Description;
            newFile.Credit = model.Credit;
            newFile.DateUploaded = DateTime.Now;
            FormsIdentity identity = (FormsIdentity)User.Identity;
            int nUserID = Int32.Parse(identity.Ticket.UserData);
            newFile.Uploader = nUserID;
            db.Media.Add(newFile);
            db.SaveChanges();
            //return RedirectToAction("Admin", "Index");


            //Save file content goes here
        }

        if (isSavedSuccessfully)
        {
            return Json(new { Message = "File saved" });
        }
        else
        {
            return Json(new { Message = "Error in saving file" });
        }
    }

    return View();
}

John · Accepted Answer · 2014-12-23 20:52:09Z

1

You're using the absolute path on the server (from MapPath) which is not good. This file is not available for the user. Try the code below to indicate the file is available in the 'Uploads' folder.

@foreach (var item in Model)
{
    <img src="/Uploads/@item.FileName" height="127" width="127"/>
}

answered Dec 23, 2014 at 20:52

John

3,7121 gold badge14 silver badges13 bronze badges

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

1 Comment

Joe Enos Over a year ago

Try to avoid absolute paths like that - you can use @Url.Content("~/Uploads/" + item.FileName) or whatever path you need, so that this will work regardless of where the application lives in relation to the root of the domain.

GvM · Accepted Answer · 2014-12-23 20:51:43Z

0

You should use a relative path that would point to the image on your web server (or accesible by your web server). For example you could have an Uploads folder on your web root (physical/virtual whatever works best for you). Then in your database you would store the path as /Uploads/Lagos-20140103-00347.jpg which would be used for your image tag.

answered Dec 23, 2014 at 20:51

GvM

1,73314 silver badges15 bronze badges

Collectives™ on Stack Overflow

display image from database using filepath

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related