Aspire 项目无法加载 Blazor 页面的图像

Question

问题：新的 .NET Aspire Starter 应用程序项目包含复制的工作 Razor 页面，该页面显示图像在按下按钮时无法显示图像。 为什么？

重现步骤： 背景 - 需要将 .NET Aspire 模块加载到 Visual Studio 中。

1. 下载并验证 Blazor Samples 运行其 ShowImage2 razor 页面，并在按下按钮时正确显示图像： https://github.com/dotnet/blazor-samples/

2. 创建新项目=>“.NET Aspire Starter App”模板并采用默认值。

3. 将 ShowImage2.razor 从步骤 1 或从以下 2 个链接之一复制到项目中： https://github.com/dotnet/blazor-samples/blob/main/8.0/BlazorSample_WebAssembly/Pages/ShowImage2.razor https://github.com/dotnet/blazor-samples/blob/main/9.0/BlazorSample_WebAssembly/Pages/ShowImage2.razor

我将此 ShowImage2.razor 代码放在 C:\Users\XXXX\source 中 epos\AspireApp1\AspireApp1.Web\Components\Pages 与其他 razor 页面。

4. 调整Layout目录中的NavMenu.razor，以便可以到达新页面。我是这样做的：

        <div class="nav-item px-3">
        <NavLink class="nav-link" href="show-image-2">
            <span class="bi bi-list-nested" aria-hidden="true"></span> Show Image2
        </NavLink>
    </div>
   

5. 运行并验证新页面是否无法显示按下按钮时的图像。 （Aspire 需要单击资源，然后单击 webfrontend 行和任一端点才能查看正在运行的网页。）

6. 所以问题是“为什么？”失败了吗？

PS - （您可以将 alt="null" 属性添加到 img 标签来澄清事情。）

也许我需要添加旧 Blazor 应用程序不需要的 @rendermode？也许 ShowImage 页面的某些外部部分需要打开？

Answer 1

也许我需要添加旧 Blazor 应用程序所做的@rendermode 不需要吗？也许 ShowImage 页面需要一些外部部分 有什么东西打开了吗？

是的，您需要从.NET 8添加@rendermode。

正如官方文档所说，默认渲染模式是Static Server，不支持任何事件。

要添加交互式支持（事件），您可以在组件中添加

@rendermode InteractiveServer

。