locked
ASP.NET Core 3.1 image problem with "~" sign RRS feed

  • Question

  • User-2054057000 posted

    Why is "~" sign not taking the img tag to the root folder in asp.net core. 

    In my view i am setting the img's tag src attribute like this:

    <img src="@Model.Logo" />

    The Model.Logo has the value : ~/Images/user-management-identity.png The problem here is that "~" sign not resolving to root folder. I checked it on in the page source and found that the code of the img tag formed is.

    <img src="~/Images/aspnet-core-model-validation.png" />

    When I directly place the given img tag with it's src in the view then it works correctly. The below code works well.

    <img src="/Images/user-management-identity.png" />

    What is the reason??

    Wednesday, September 2, 2020 1:41 PM

Answers

  • User753101303 posted

    Hi,

    Use <img src="@Url.Content(Model.Logo)" /> to force resolving your ~ prefix (or you could also resolve this when loading model data).

    With earlier Razor versions you actually had also to do this for hardcoded values. As it is cumbersome they later added processing literal values for you.

    As any design decision, doing that or not automatically when using variables could be discussed:
    - they likely thought it is best to consider that you take then the responsability for providing the correct resolved value
    - else it would be done for you without any way to opt-out and for example src="@value" and data-src="@value" would NOT render the same value

    (also you can always opt for doing later but if you took the wrong decision it is too late as you already have code that relies on that)

    Edit: another option could be to use your own image tag helper. For example maybe something such as :

    <img asp-src="@Model.Logo" />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 2, 2020 2:16 PM
  • User1312693872 posted

    Hi, yogyogi

    The problem here is that "~" sign not resolving to root folder.

    This does not work because '~' is not a feature of HTML or CSS.

    From Asp.net MVC 4, we can write '~' with URLs in Html because Razor View Engine will parse the URLs.

    And once we get into the src, it will not go back, so if we use @Model, src will not parse the ‘~’.

    You can refer to the following link:

    https://stackoverflow.com/questions/5331777/using-url-content-with-semi-relative-url

    https://stackoverflow.com/questions/45526620/asp-net-core-tilde-slash-not-resolving-image-path

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 3, 2020 6:03 AM

All replies

  • User753101303 posted

    Hi,

    Use <img src="@Url.Content(Model.Logo)" /> to force resolving your ~ prefix (or you could also resolve this when loading model data).

    With earlier Razor versions you actually had also to do this for hardcoded values. As it is cumbersome they later added processing literal values for you.

    As any design decision, doing that or not automatically when using variables could be discussed:
    - they likely thought it is best to consider that you take then the responsability for providing the correct resolved value
    - else it would be done for you without any way to opt-out and for example src="@value" and data-src="@value" would NOT render the same value

    (also you can always opt for doing later but if you took the wrong decision it is too late as you already have code that relies on that)

    Edit: another option could be to use your own image tag helper. For example maybe something such as :

    <img asp-src="@Model.Logo" />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 2, 2020 2:16 PM
  • User1312693872 posted

    Hi, yogyogi

    The problem here is that "~" sign not resolving to root folder.

    This does not work because '~' is not a feature of HTML or CSS.

    From Asp.net MVC 4, we can write '~' with URLs in Html because Razor View Engine will parse the URLs.

    And once we get into the src, it will not go back, so if we use @Model, src will not parse the ‘~’.

    You can refer to the following link:

    https://stackoverflow.com/questions/5331777/using-url-content-with-semi-relative-url

    https://stackoverflow.com/questions/45526620/asp-net-core-tilde-slash-not-resolving-image-path

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 3, 2020 6:03 AM