Blazor计数器奇偶值如何分别在首页展示不同图片 附尝试代码

你目前的实现存在逻辑拆分错误：@code 块属于C#业务代码区域，不能直接在方法内写入 <img> 这类Razor视图标记，视图渲染逻辑需要放在组件的模板渲染区，依靠Blazor的状态驱动渲染机制实现动态切换。

正确完整实现代码 #

@page "/counter"

<h1>计数器</h1>

<p>当前计数：@currentCount</p>

<!-- 模板区域根据计数值奇偶渲染对应图片 -->
@if (currentCount % 2 == 0)
{
    <img src="~/Images/black_atlasian_mode copy.png" alt="偶数状态图片" />
}
else
{
    <img src="~/Images/teal_atlasian_mode copy.png" alt="奇数状态图片" />
}

<button class="btn btn-primary" @onclick="IncrementCount">点击计数</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        // 方法仅负责更新计数状态，不需要处理渲染逻辑
        currentCount++;
    }
}

简化写法 #

你也可以通过动态绑定图片src属性减少重复代码，效果完全一致：

<!-- 把判断逻辑直接写在src属性的绑定表达式中 -->
<img 
    src="@(currentCount % 2 == 0 ? "~/Images/black_atlasian_mode copy.png" : "~/Images/teal_atlasian_mode copy.png")" 
    alt="计数器状态图片" 
/>

实现原理：Blazor组件会监听currentCount这类状态字段的更新，字段值发生变化时自动重新渲染模板区域的内容，因此只需要在模板内加入奇偶判断逻辑，就能自动跟随计数值切换展示的图片。

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