Razor path to relative URL

Question

_{Thursday, November 22, 2018 8:45 PM}

OK, this is absolutely bonkers.

And I'm sure it's been answered before but the last 5 "solutions" I have tried don't work.

I am creating a <img> from a string in a data table.

The string from the function looks like this:

<img src='~/Content/Images/flags/flags/shiny/48/Spain.png' style='width: 48; height: 48; display:inline;' alt='Spain.png' title='Spain.png'/>

If I embed it in the page with @imageStr, razor escapes the whole thing so you see the text in the page...

Using @Html.Raw() does not expand the ~ into the correct relative path.

NOW

My desktop would work with just removing the ~, but my test environment is like www.company.com/thiswebsite/...  so removing the ~ would result in www.company.com/Content... instead of www.company.com/thiswebsite/Content...

So I guess that @Html.Raw is processed after razor fixes the local urls.  

I need a function I can call in my code that correctly resolves the ~ in my code.  I thought there was a function I could call that did that.

Otherwize I need to find the application troot and manually string replace it.

All replies (4)

_{Friday, November 23, 2018 4:11 AM ✅Answered}

Actually, I found the answer:

Within the function creating the img tag, I used this:

string filename = string.Format("~/Content/Images/flags/flags/shiny/{0}/{1}", size, flagname);
filename = System.Web.VirtualPathUtility.ToAbsolute(filename);
answer = string.Format("<img src='{0}' style='width: {1}; height: {1}; display:inline;' alt='{2}' title='{2}'/>", filename, size, flagname);

The resulting page html looks like this.

<img src='/Content/Images/flags/flags/shiny/64/Spain.png' style='width: 64; height: 64; display:inline;' alt='Spain.png' title='Spain.png'/>

_{Thursday, November 22, 2018 8:53 PM}

Simply remove the tilde to create a relative reference. The issue is how you’ve cofigured the app in IIS.

_{Thursday, November 22, 2018 9:45 PM}

Hi,

So your string is the full img markup?

Each time I see something about ~ processing I'm telling myself I should see how it works. My guess is that as you render a string, Razor doesn't keep track at all that this is HTML markup and the string is left unchanged.

I believe that when written from a view, Razor likely renders those strings a bit differently and can keep track it is currently rendering an attribute allowing to possibly process the tilde.

A possible option might be to use a similar approach and have a helper that would be used for rendering html markup.

_{Thursday, November 22, 2018 10:15 PM}

unlike unix/linux/osx where the operating system supports "~/" in asp.net a helper needs to implement it. in razor, when the html is parsed, razor add support for "~". also the url helper methods support it. so in razor:

   <img src="~/content/myimage.jpg" />

razor paring will handle, but:

   @Html.Raw("<img src='~/content/myimage.jpg' />")

will not process the "~". to use raw, you need to use:

   @Html.Raw($"<img src='{Url.Content("~/content/myimage.jpg")}' />")