Search code examples
asp.net-corerazorblazor-server-side

Tilda references in Blazor Components not working

In classic ASP.NET MVC, I typically make all references to static assets using the following pattern

<img width="110" height="38" src="~/images/logo/logo_light.svg" alt="...">

I am now trying to do the same using razor pages in a server-side rendered Blazor web app.

If I use '~' references in my main _Layout.cshtml Razor page then the functionality works as expected and the '~' is substituted with the root of the application.

However, if I use a '~' reference in a component, then the '~' is not recognised and it ends up in the resulting HTML and hence creates broken links.

Why does '~' not work in Blazor components? Is there an alternative approach that can be used?

Solution

  • You don't need the ~ in Blazor - it uses root-relative urls - based on the base-path of the site.

    You can remove the ~ from your example.