.NET Aspire项目中Blazor页面点击按钮无法显示图片原因排查

问题核心 #

将可正常运行的Blazor ShowImage2 页面复制到新建的.NET Aspire Starter App项目后，点击按钮无法显示生成的图片，需排查原因并解决。

根本原因 #

.NET Aspire Starter App默认创建的是Blazor Web App（交互式服务器渲染/自动模式），而原ShowImage2示例基于纯Blazor WebAssembly环境开发。两者渲染模式不同，导致原页面中直接在客户端生成图片流的逻辑无法在服务器端渲染环境下正常工作。

解决方案 #

方案1：切换页面为交互式WebAssembly渲染模式 #

在ShowImage2.razor文件顶部添加渲染模式声明，让页面在客户端执行，与原示例环境一致：

@rendermode InteractiveWebAssembly
@page "/show-image-2"

<!-- 原页面剩余代码不变 -->

添加后重新运行项目，点击按钮即可正常显示图片。

方案2：适配服务器端渲染模式（通过API返回图片） #

如果需要保留服务器端渲染，可通过创建API端点来返回图片流：

1. 在项目的Program.cs中添加图片生成API：

app.MapGet("/api/generate-image", () =>
{
    // 复制ShowImage2中的图片生成逻辑
    using var bitmap = new System.Drawing.Bitmap(100, 100);
    using var graphics = System.Drawing.Graphics.FromImage(bitmap);
    graphics.Clear(System.Drawing.Color.LightBlue);
    graphics.DrawString("Hello, Blazor!", new System.Drawing.Font("Arial", 12), System.Drawing.Brushes.Black, 10, 10);
    
    var stream = new MemoryStream();
    bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
    stream.Position = 0;
    
    return Results.File(stream, "image/png");
});

2. 修改ShowImage2.razor中的图片绑定逻辑，指向API端点（添加随机参数避免缓存）：

<img src="/api/generate-image?cache=@DateTime.Now.Ticks" alt="生成的图片" />

点击按钮时可触发页面刷新或参数更新，重新获取图片。

排查验证技巧 #

给img标签添加alt属性（如alt="生成的图片"），如果页面能显示alt文本但图片加载失败，说明问题出在图片源的获取逻辑上，而非页面渲染本身。

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