Blazor .NET 8因路由配置问题导致图片无法加载求助

问题原因 #

当你使用@page "/{type}/{text}"这类动态嵌套路由时，浏览器会把图片的相对路径（比如images/logo.png）解析成相对于当前路由层级的路径（比如/type/text/images/logo.png），但实际图片文件存放在wwwroot/images目录下，导致请求路径错误，图片加载失败。

解决方案 #

• 使用根相对路径：直接在图片路径前加/，让浏览器从网站根目录开始查找资源。

  <img src="/images/logo.png" alt="Logo" />
  

• 确保Base URI配置正确：
  • Blazor Server项目：在Pages/_Host.cshtml的<head>标签里确认存在<base href="/" />。
  • Blazor WebAssembly项目：在wwwroot/index.html的<head>标签里确认存在<base href="/" />。
    配置后，使用相对路径（比如images/logo.png）就能正常加载，因为Base URI会告诉浏览器以根目录为基准解析路径。
• 检查静态文件中间件：在Program.cs中确保已添加静态文件服务，这是Blazor默认配置，但如果手动移除过需要重新添加：

  var builder = WebApplication.CreateBuilder(args);
  // ...其他服务配置
  var app = builder.Build();
  // 确保这行代码存在，用于提供wwwroot下的静态文件
  app.UseStaticFiles();
  // ...其他中间件配置
  app.Run();
  

• 动态构建图片路径（可选）：如果需要动态处理路径，可以注入NavigationManager（适用于Server和WebAssembly）来获取Base URI并拼接路径：

  @inject NavigationManager NavManager
  <img src="@($"{NavManager.BaseUri}images/logo.png")" alt="Logo" />
  

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