如何为Blazor中流式传输的图片添加客户端浏览器缓存

你现在的问题核心有两个：一是当前用URL.createObjectURL生成的临时URL每次都不一样，浏览器没法缓存；二是因为通过Blazor JS互传流，没法直接利用HTTP缓存头部。我给你两个可行方案，从简单到自定义，按需选择：

方案一：改用HTTP API + 浏览器原生缓存（推荐） #

这个方案最省心，直接利用浏览器的HTTP缓存机制，不需要额外写JS缓存逻辑，还能自动处理缓存失效。

1. 服务器端添加图片API端点 #

创建一个API控制器，返回图片流并设置缓存相关的响应头：

[ApiController]
[Route("api/images")]
public class ImagesController : ControllerBase
{
    private readonly ImageStreamService _imageStreamService;

    public ImagesController(ImageStreamService imageStreamService)
    {
        _imageStreamService = imageStreamService;
    }

    [HttpGet("{imageName}")]
    public async Task<IActionResult> GetImage(string imageName)
    {
        var imageResult = await _imageStreamService.GetAnImageStream(imageName);
        
        // 设置缓存策略：公开缓存，有效期1天（86400秒）
        Response.Headers.CacheControl = "public, max-age=86400";
        
        // 可选：添加ETag实现协商缓存（需要你的ImageResult包含图片哈希值）
        if (!string.IsNullOrEmpty(imageResult.Hash))
        {
            Response.Headers.ETag = $"\"{imageResult.Hash}\"";
        }
        
        return File(imageResult.Stream, imageResult.ContentType);
    }
}

2. 简化Blazor组件 #

直接用img标签指向API地址，浏览器会自动处理缓存：

<img src="/api/images/@ImageName" alt="@ImageName" /> 
@code { 
  [Parameter] public string ImageName { get; set; } 
}

为什么这个方案更好？

• 浏览器会自动缓存图片，刷新页面时只要缓存没过期，就不会请求服务器
• 临时URL的问题直接解决了，因为src是固定的API地址
• 可以通过Cache-Control、ETag等标准HTTP头部精细控制缓存策略，比如缓存有效期、协商缓存等

方案二：自定义JS客户端缓存（适合无法改用HTTP API的场景） #

如果必须保留原有的流式传输方式，可以用浏览器的Cache API来手动缓存Blob，解决临时URL变化的问题。

1. 修改JavaScript代码，添加缓存逻辑 #

// 初始化专属图片缓存
const imageCache = await caches.open('blazor-image-cache');

// 检查缓存是否存在
window.hasImageCache = async (cacheKey) => {
  const cacheIdentifier = `image://${cacheKey}`;
  const cachedResponse = await imageCache.match(cacheIdentifier);
  return !!cachedResponse;
};

// 从缓存加载图片
window.loadImageFromCache = async (imageElementId, cacheKey) => {
  const cacheIdentifier = `image://${cacheKey}`;
  const cachedResponse = await imageCache.match(cacheIdentifier);
  
  if (cachedResponse) {
    const blob = await cachedResponse.blob();
    const url = URL.createObjectURL(blob);
    const image = document.getElementById(imageElementId);
    
    image.onload = () => URL.revokeObjectURL(url);
    image.src = url;
  }
};

// 加载并缓存图片（原逻辑+缓存）
window.setImage = async (imageElementId, imageStream, cacheKey) => {
  const cacheIdentifier = `image://${cacheKey}`;
  const arrayBuffer = await imageStream.arrayBuffer();
  const blob = new Blob([arrayBuffer]);
  
  // 存入缓存
  await imageCache.put(cacheIdentifier, new Response(blob));
  
  // 设置图片src
  const url = URL.createObjectURL(blob);
  const image = document.getElementById(imageElementId);
  
  image.onload = () => URL.revokeObjectURL(url);
  image.src = url;
};

2. 更新Blazor组件，优先使用缓存 #

<img id="@ImageName" alt="@ImageName" /> 
@code { 
  [Parameter] public string ImageName { get; set; } 
  // 可选：添加版本号控制缓存失效
  [Parameter] public string ImageVersion { get; set; } = "1";
  
  [Inject] private ImageStreamService _imageStreamService { get; set; } 
  [Inject] private IJSRuntime JS { get; set; } 

  // 用ImageName+版本号作为缓存键，更新图片时只需修改版本号
  private string CacheKey => $"{ImageName}-{ImageVersion}";

  protected async override Task OnInitializedAsync() {
    // 先检查缓存是否存在
    bool hasCachedImage = await JS.InvokeAsync<bool>("hasImageCache", CacheKey);
    
    if (!hasCachedImage) {
      // 缓存不存在，从服务器获取并缓存
      var imageResult = await _imageStreamService.GetAnImageStream(ImageName);
      using var dotnetStream = new DotNetStreamReference(imageResult.Stream);
      await JS.InvokeVoidAsync("setImage", ImageName, dotnetStream, CacheKey);
    } else {
      // 直接从缓存加载
      await JS.InvokeVoidAsync("loadImageFromCache", ImageName, CacheKey);
    }
    
    await base.OnInitializedAsync();
  } 
}

缓存失效处理
当图片内容更新时，只需要修改ImageVersion参数（比如从"1"改成"2"），客户端就会自动从服务器获取新图片并覆盖旧缓存。

解决临时URL变化的问题 #

之前每次刷新页面URL都是新的GUID，是因为URL.createObjectURL每次都会生成唯一的临时URL。上面两个方案都解决了这个问题：

• 方案一用固定的API地址作为src，浏览器会缓存这个地址对应的资源
• 方案二用固定的缓存键（ImageName+版本号）来存储Blob，即使生成临时URL，也是从缓存的Blob生成，不会重复请求服务器

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