.NET Razor Pages中使用@Model绑定图片src路径加载失败问题

• 路径拼接语法错误
  直接拼接字符串时容易出现Razor解析顺序问题，比如<img src="image/@Model.LeagueID/logos/..." />可能生成错误路径。推荐使用根路径标识~/结合Razor表达式或Url.Content方法：

  <!-- 方式1：使用Url.Content生成正确路径 -->
  <img src="@Url.Content($"~/image/{Model.LeagueID}/logos/.../nfl.png")" />
  <!-- 方式2：用括号明确表达式范围 -->
  <img src="~/image/@(Model.LeagueID)/logos/.../nfl.png" />
  

  ~/会自动映射到wwwroot目录，避免相对路径层级混乱。

• Model值未正确渲染
  先验证@Model.LeagueID的实际输出值，比如在页面添加：

  <p>当前LeagueID：@Model.LeagueID</p>
  

  如果输出为空或不是预期的"nfl"，检查PageModel的OnGet方法是否正确为LeagueID赋值，例如：

  public string LeagueID { get; set; }
  public void OnGet()
  {
      LeagueID = "nfl";
  }
  

• 静态文件中间件未配置
  确保项目已启用静态文件访问：

  • .NET 6+ 在Program.cs中添加app.UseStaticFiles();
  • .NET 5及以前 在Startup.cs的Configure方法中添加app.UseStaticFiles();
    缺少此配置会导致wwwroot下的静态资源无法被访问。

• 路径大小写不匹配
  Windows系统路径不区分大小写，但部署到Linux或IIS环境时会严格区分。检查实际文件夹名称（如image/NFL/logos）和Model.LeagueID的值（如"nfl"）是否大小写一致。

• Razor表达式解析优先级问题
  若直接将@Model.LeagueID与后续路径连写，Razor可能误将后面的字符识别为模型属性的一部分。用括号包裹表达式可避免此问题：

  <img src="~/image/@(Model.LeagueID)/logos/.../nfl.png" />
  

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