如何在Blazor页面中展示无文件扩展名的匿名化存储图片

你提到的两种思路均可行，结合敏感数据的场景更推荐使用接口返回图片流的方案，具体实现方式如下：

方案1：路径映射伪装（仅解决扩展名识别问题） #

• 你可以在服务端配置路由重写规则，给匿名文件ID拼接虚拟图片后缀，比如将请求路径/images/[匿名ID].png重写为/rawfiles/[匿名ID]，后端收到请求后剥离后缀得到文件ID，查询数据库拿到真实文件路径后读取返回即可。
• 该方案仅兼容浏览器通过URL后缀识别文件格式的逻辑，无额外权限校验能力，不适合敏感数据场景单独使用。

方案2：接口返回图片流（推荐，适配敏感数据场景） #

• 首先开发专用的文件访问接口，示例路由为GET /api/file/{fileId}，接口执行逻辑如下：
  1. 校验当前登录用户是否拥有该文件的访问权限，无权限直接返回403
  2. 根据传入的fileId查询数据库，获取文件的真实存储路径、对应MIME类型（如image/jpeg、image/png）
  3. 读取文件流，设置响应头Content-Type为查询到的MIME类型，直接返回二进制流即可
• Blazor前端img标签直接填写接口地址即可正常渲染，示例代码：

  <img src="/api/file/@targetFileId" alt="业务图片" />
  

• 浏览器会自动根据响应头的Content-Type识别图片格式，不需要依赖URL中的扩展名。如果有缓存需求，可以在响应头中增加合理的Cache-Control规则降低重复请求消耗。
• 如果你使用的是Blazor WASM项目，也可以选择将接口返回的流转换为base64字符串内联到img标签中，但该方案会使文件体积增加约30%，仅适合小尺寸图片使用。

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