ASP.Net MVC - Img Src Server Path

Question

Visual Studio 2012 - ASP.net - MVC 4

I am having troubles displaying an image from a server path which is stored in a database.

I am using HttpPostedFileBase to retrieve the file the user has uploaded:

using (var uow = _db.CreateUnitOfWork())
            {
                if (imageUpload != null && imageUpload.ContentLength > 0)
                {
                    var fileName = Path.GetRandomFileName() + Path.GetExtension(imageUpload.FileName);
                    var path = Path.Combine(System.Web.Hosting.HostingEnvironment.MapPath("~/Uploads"), fileName);
                    imageUpload.SaveAs(path);
                    achievement.ImageLoc = path;
                }

                uow.Add(achievement);
                Save(uow);
                return true;
            }

This will save the absolute path of the uploaded file into the database and save the file onto the server. When I try to retrieve this path to display an image file in a view all I get is a blank square like the file is not being found (about:blank when right click -> copy image url). I know the path is correct because I am using it in a different view to allow users to download files, which is working correctly. Also I am allowing the user to edit the file which successfully deletes the old and uploads a new one. The only problem I am having is displaying an image in a view.

I have tried:

<img src="@Html.Encode(Model.ImageLoc)" />
<img src=@Url.Content(Model.ImageLoc)" />

Would anyone be able to suggest anything?

Have you checked the Html of the output? (i.e. View Source on the page it renders). A quick scan over the link it places in the `src` tag will probably give you a better idea of what's wrong. Things to check for include the path being double encoded (i.e. you encode it once on the way to the database, and again on the way out) or missing a "/" towards the end of the path. — Smudge202, Oct 09 '12 at 16:02

score 13 · Accepted Answer · answered Oct 09 '12 at 16:30

You have stored the absolute path to the image in your database, but you need to reference it with the relative path:

<img src="@Url.Content("~/Uploads/" + System.IO.Path.GetFileName(Model.ImageLoc))" alt="" />

The resulting HTML must look like this:

<img src="/Uploads/tccxdfu0.nde.jpg" alt="" />

and not:

<img src="\\PDC2\sites\t\<site.co.uk>\public_html\Uploads\tccxdfu0.nde.jpg" alt="" />

because the client cannot access such folders from the server.

score 0 · Answer 2 · answered Oct 09 '12 at 16:21

0

Look at using

http://msdn.microsoft.com/en-us/library/system.web.mvc.mvchtmlstring%28VS.100%29.aspx I suspect it's being encoded hence not outputting as you expect.

answered Oct 09 '12 at 16:21

RubbleFord

7,456
9
50
80

ASP.Net MVC - Img Src Server Path

2 Answers2

Linked