Blazor Server中API图片无法缓存及直接下载问题的解决

问题场景 #

开发Blazor Server应用时，通过Minimal API处理从数据库（而非文件系统）获取图片的请求，功能可正常运行，但存在两个问题：

• 图片始终不被浏览器缓存，每次页面加载对应URL都会重新下载
• 在浏览器地址栏直接输入图片URL时，图片会被下载到本地文件夹，而非在浏览器窗口内显示

原实现代码 #

Program.cs中的路由注册 #

app.MapGet("/_image/{filename}", async ([FromRoute] string filename, FileService fileService) => await fileService.GetImage(filename));

FileService中的GetImage方法 #

public async Task<IResult> GetImage(string filename)
{
    byte[] data = null;

    if (!string.IsNullOrWhiteSpace(filename))
    {
       /* ... 从数据库获取数据 ... */
    }
    return data != null ? Results.File(data, "image/png", filename) : Results.NotFound();
}

解决方案 #

通过注入HttpContext并设置响应头，可同时解决这两个问题：

• 设置Content-Disposition为inline，告知浏览器直接在窗口内显示图片，而非触发下载
• 设置Cache-Control为max-age=180, public，允许浏览器缓存图片180秒，减少重复请求

修改后的代码 #

更新Program.cs的路由 #

app.MapGet("/_image/{filename}", async ([FromRoute] string filename, FileService fileService, HttpContext context) => await fileService.GetImage(filename, context));

修改后的GetImage方法 #

public async Task<IResult> GetImage(string filename, HttpContext context)
{
    byte[] data = null;

    if (!string.IsNullOrWhiteSpace(filename))
    {
       /* ... 从数据库获取数据 ... */

       if (data != null) {
          context.Response.Headers.ContentDisposition = "inline";
          context.Response.Headers.CacheControl = "max-age=180, public";
       }
    }
    return data != null ? Results.File(data, "image/png", filename) : Results.NotFound();
}

修改后功能运行正常，图片可被浏览器缓存，且直接在窗口内显示。

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