本文介绍在 Blazor 应用中，当 <img> 的 src 动态更新时如何避免旧图片残留问题，通过临时置空 ImageInfo 并配合条件渲染，结合 CSS 加载背景，实现平滑过渡至新图片的用户体验。
本文介绍在 blazor 应用中，当 `` 的 `src` 动态更新时如何避免旧图片残留问题，通过临时置空 `imageinfo` 并配合条件渲染，结合 css 加载背景，实现平滑过渡至新图片的用户体验。
在 Blazor 中使用 <img src="@url" /> 绑定动态图片地址时，一个常见痛点是：当 @url 发生变化（例如用户点击切换图片），浏览器会立即开始加载新资源，但旧图片仍持续显示，直到新图完全加载完成——这期间可能长达数秒，造成视觉卡顿或误导用户。尤其当目标服务器响应慢、网络不稳定或图片体积较大时，该问题尤为明显。
根本原因在于：Blazor 仅负责更新 DOM 属性（如 src），而浏览器对 <img> 元素的加载行为是异步且不可中断的；它不会自动清空当前内容，也不会主动触发占位状态。
✅ 正确解法是主动控制渲染时机，而非依赖浏览器默认行为。核心思路分三步：
- 提前清空数据源：在获取新图片前，将绑定的 ImageInfo 置为 null，触发组件重新渲染；
- 条件渲染图片：仅在 ImageInfo 非空时才渲染 <img> 标签，否则不输出任何图像元素；
- 利用 CSS 背景兜底：父容器（如 .loading）已设置 background: url(./loading.gif)，当 <img> 不渲染时，该背景自然显现，形成“加载中”视觉反馈。
以下是完整实现代码：
<!-- ImageViewer.razor -->
@if (ImageInfo is not null)
{
<img class="attachment" src="@url" alt="Image content" />
}
@code {
[Parameter]
public ImageInfo? ImageInfo { get; set; }
private string url => ImageInfo?.GetImageUrl ?? "";
}<!-- 父组件中调用逻辑 -->
<div class="next-image" @onclick="ShowNextImage"></div>
<div class="loading">
<ImageViewer ImageInfo="_currentImage" />
</div>
@code {
private ImageInfo? _currentImage;
private async Task ShowNextImage()
{
_currentImage = null; // ? 关键：先清空，强制移除旧 img
StateHasChanged(); // ? 确保立即重渲染（可选，但推荐）
await Task.Delay(1); // 小延迟确保 DOM 更新完成（部分场景需）
_currentImage = GetNextImage(); // 获取新数据
StateHasChanged(); // 触发新图片渲染
}
}? 注意事项：
- ImageInfo 参数类型必须改为 ImageInfo?（可空引用类型），以支持 null 值判断；
- Task.Delay(1) 并非必需，但在某些快速连续点击场景下可避免因渲染队列竞争导致的瞬时状态丢失；若无异常可省略；
- alt 属性建议保留，提升可访问性；
- 若需更精细控制（如加载失败 fallback），可进一步扩展为 @onload / @onerror 事件处理，或封装成带状态管理的 <ImageLoader> 组件。
最终效果：每次点击切换时，旧图瞬间消失 → .loading 容器的 GIF 背景立即可见 → 新图加载完成后平滑替换。整个过程无视觉残留，体验专业流畅。
