如何在Razor Pages中配置路由，实现非标准路径获取图片？

要实现通过images/{image_id}路径访问图片，需要完成路由配置和页面链接调整两个核心步骤，具体操作如下：

1. 创建图片请求处理逻辑 #

方法一：使用Razor Page路由 #

在Pages目录下新建Images文件夹，创建Image.cshtml页面：

• 页面顶部指定路由模板：

  @page "{image_id:int}"
  @model GetandTake.Pages.Images.ImageModel
  

• 编写后台代码（Image.cshtml.cs），通过image_id获取图片并返回：

  public class ImageModel : PageModel
  {
      private readonly YourDbContext _dbContext;
  
      public ImageModel(YourDbContext dbContext)
      {
          _dbContext = dbContext;
      }
  
      public async Task<IActionResult> OnGetAsync(int image_id)
      {
          var category = await _dbContext.Categories.FirstOrDefaultAsync(c => c.Id == image_id);
          if (category == null || string.IsNullOrEmpty(category.ImagePath))
          {
              return NotFound();
          }
  
          // 拼接图片实际存储路径（假设图片存放在wwwroot下）
          var fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", category.ImagePath);
          if (!System.IO.File.Exists(fullPath))
          {
              return NotFound();
          }
  
          // 根据图片类型设置正确的Content-Type
          var contentType = category.ImagePath.EndsWith(".png") ? "image/png" : "image/jpeg";
          return PhysicalFile(fullPath, contentType);
      }
  }
  

方法二：直接配置端点路由（Program.cs） #

如果不需要单独的Razor Page，可在Program.cs中添加路由端点：

app.MapGet("/images/{imageId:int}", async (int imageId, YourDbContext dbContext) =>
{
    var category = await dbContext.Categories.FirstOrDefaultAsync(c => c.Id == imageId);
    if (category == null || string.IsNullOrEmpty(category.ImagePath))
    {
        return Results.NotFound();
    }

    var fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", category.ImagePath);
    if (!File.Exists(fullPath))
    {
        return Results.NotFound();
    }

    var contentType = category.ImagePath.EndsWith(".png") ? "image/png" : "image/jpeg";
    return Results.File(fullPath, contentType);
});

2. 修改现有页面的图片链接 #

将原页面中硬编码的图片地址替换为新路由格式，使用Url.Page生成规范链接：

@page
@model GetandTake.Pages.Categories.ImagesModel
<h3>All Images</h3>
@foreach (var category in Model.Categories)
{
    @if (category.ImagePath != null)
    {
        // 生成images/{image_id}格式的链接
        string imagePath = Url.Page("/Images/Image", new { image_id = category.Id });
        <img src="@imagePath" class="img-thumbnail" width="250px" />
    }
}

关键注意点 #

• 确保image_id对应数据库中分类的唯一标识（如Id字段），保证能精准匹配图片
• 根据图片实际存储位置调整路径拼接逻辑，若图片存放在云存储，需替换为对应的获取逻辑
• 可通过判断图片扩展名动态设置Content-Type，覆盖更多图片类型

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