absolute image path doesn't work with in MVC 5

Question

I'm trying to display an image for which the path is stored in the model.

The absolute path stored in the model maps to the physical path on the storage.

This works:

$("#uploadresults").prepend('<img src="../../Uploads/_MG_9806.jpg" alt="" />');

However this doesn't work:

$("#uploadresults").prepend('<img src= "'+@Url.Content(Model.ImageUrl) +'" alt="Image" />');

Model.ImageUrl = "C:\Users\Emad\Documents\Visual Studio 2013\Projects\projects_notworking\MarketSurvey\MarketSurvey\Uploads\_MG_9806.jpg"

It appears that in my view, I can only use relative paths to get it to work. Is there a way to convert my physical path to a relative path?

That's not how you use `Url.Content()`. You don't pass it a disk path, you pass it a URL. — itsme86, Feb 09 '15 at 20:26
Yeah there probably is an issue with that also. I've tried putting the entire physical path and it still doesn't work. — emad, Feb 09 '15 at 20:28

StriplingWarrior · Answer 1 · 2015-02-09T23:01:09.117

0

Try using a virtual path instead:

Model.ImageUrl = "~/MarketSurvey/Uploads/_MG_9806.jpg";

Virtual paths are relative to your web project's folder, so you might need to tweak that based on whether MarketSurvey is a folder inside your project, or your project folder itself.

And this simpler view code should work better:

$("#uploadresults").prepend('<img src="@Url.Content(Model.ImageUrl)" alt="Image" />');

edited Feb 09 '15 at 23:01

answered Feb 09 '15 at 20:30

StriplingWarrior

151,543
27
246
315

That doesn't work either. Only way it works is ../../Uploads/_MG_9806.jpg – emad Feb 09 '15 at 20:34
'' This is not working – emad Feb 09 '15 at 21:30
@emad: In the OP, you show yourself calling `@Url.Content(Model.ImageUrl)`, but the output you reported here indicates that you just used @Model.ImageUrl`. Am I right? – StriplingWarrior Feb 09 '15 at 22:55
yes that's correct. But I have used both and it seems to be really picky about the path being relative. – emad Feb 10 '15 at 00:17
What is the HTML output if you use the code I have above? – StriplingWarrior Feb 10 '15 at 16:39
– emad Feb 10 '15 at 19:21
I'm sorry, but that can't possibly have come from the code I posted above. Are you changing the value of `Model.ImageUrl` again before passing it into your view or something? – StriplingWarrior Feb 10 '15 at 20:11
Sorry this is what I get: ...looks like it is omitting my \ from the path thinking that its a escape character – emad Feb 10 '15 at 22:04
how can i stop that from happening? – emad Feb 10 '15 at 22:12
I'm sorry, but I just can't believe `@Url.Content("~/MarketSurvey/Uploads/_MG_9806.jpg")` is giving you a hard-drive-based path like that. Double- and triple-check your code. Try setting a debug point and checking the value of `ImageUrl` at that point in your code. – StriplingWarrior Feb 11 '15 at 17:05
This thread answered my question: http://stackoverflow.com/questions/6081433/getting-relative-virtual-path-from-physical-path – emad Feb 13 '15 at 15:47

score 0 · Accepted Answer · edited May 23 '17 at 11:46

Instead of using jquery to update images on the page, I used the server side variables in my view like this. This works for me:

<div id="uploadresults" class="">
    @foreach (var item in Model.Images)
    {
        <img src="@item.ImageUrl.Replace(Request.ServerVariables["APPL_PHYSICAL_PATH"], "../../")" width=100 height=100 />
    }
</div>

Of course credits go to this post: Getting relative virtual path from physical path

absolute image path doesn't work with in MVC 5

2 Answers2