Blazor组件中~路径引用失效问题及替代方案咨询

在经典ASP.NET MVC里，~是由ASP.NET的Razor视图引擎（针对.cshtml页面，比如主布局文件_Layout.cshtml）负责解析的语法，渲染时会自动替换为应用的根路径。

但Blazor组件（.razor文件）的渲染逻辑由Blazor专属的渲染引擎处理，它并不识别ASP.NET传统的~路径解析规则，所以会直接把~保留在最终输出的HTML中，导致资源路径失效。

• 利用NavigationManager生成绝对路径
  在组件中注入NavigationManager，通过它的ToAbsoluteUri方法转换相对路径，自动适配应用根路径：

  @inject NavigationManager NavManager
  
  <img width="110" height="38" src="@NavManager.ToAbsoluteUri("images/logo/logo_light.svg")" alt="..." />
  

• 使用根相对路径（以/开头）
  如果你的应用部署在域名根目录（如https://your-app.com/），可以直接使用以/开头的路径：

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

  注意：如果应用部署在子路径（如https://your-app.com/xxx/），这种方式会指向域名根目录，导致路径错误。

• 基于Base href使用相对路径
  Blazor项目默认会在_Layout.cshtml中配置<base href="~/" />，这个标签会告诉浏览器所有相对路径的基准根。组件里直接使用不带前缀的相对路径即可，浏览器会自动拼接应用根路径：

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

  这是最简洁且适配大部分部署场景的方案。

• 服务端渲染场景：通过IWebHostEnvironment获取根路径（仅服务端逻辑用）
  如果需要在服务端代码中处理资源路径（比如读取本地文件），可以注入IWebHostEnvironment获取Web根目录：

  @inject IWebHostEnvironment WebHostEnv
  
  @{
      var serverPath = Path.Combine(WebHostEnv.WebRootPath, "images/logo/logo_light.svg");
      // 注意：此路径是服务端本地路径，不能直接给img的src属性用，需转换为客户端可访问的URL
  }
  

内容的提问来源于stack exchange，提问作者BENBUN Coder