locked
Razor path to relative URL RRS feed

  • Question

  • User323983933 posted

    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.

    Thursday, November 22, 2018 8:45 PM

Answers

  • User323983933 posted

    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'/>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 23, 2018 4:11 AM

All replies

  • User475983607 posted

    Simply remove the tilde to create a relative reference. The issue is how you’ve cofigured the app in IIS.
    Thursday, November 22, 2018 8:53 PM
  • User753101303 posted

    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 9:45 PM
  • User-474980206 posted

    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")}' />")

    Thursday, November 22, 2018 10:15 PM
  • User323983933 posted

    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'/>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 23, 2018 4:11 AM