本文介绍在 Blazor 应用中，当 的 src 动态更新时避免旧图片残留的问题，通过临时置空数据、条件渲染与 CSS 加载背景协同，实现平滑过渡至新图并确保加载期间显示 loading GIF。
本文介绍在 blazor 应用中，当 `` 的 `src` 动态更新时避免旧图片残留的问题，通过临时置空数据、条件渲染与 css 加载背景协同，实现平滑过渡至新图并确保加载期间显示 loading gif。
在 Blazor 中使用 绑定动态图片路径时，一个常见但易被忽视的问题是：当 @url 发生变化后，浏览器会异步加载新图像，而旧图片仍保留在 DOM 中，直至新图完全加载完成——这可能导致长达数秒的视觉“卡顿”，用户误以为操作无响应。
根本原因在于：Blazor 仅负责更新 src 属性值，但浏览器的 元素本身不会自动清空内容或触发占位行为；它只是发起新请求，同时继续显示上一张已缓存/已渲染的图片。
✅ 推荐解决方案：双阶段状态控制 + 条件渲染
核心思路是主动中断旧图显示，而非依赖浏览器默认行为。具体分三步实现：
- 临时清空数据源：在获取新图片前，将 ImageInfo 置为 null，触发组件重新渲染；
-
条件渲染
：仅当 ImageInfo 非空时才渲染
标签，避免无效 src（如空字符串或 null）导致意外行为；
-
复用 CSS 加载态：利用 .loading 容器的 background-image（即 loading.gif），在
不渲染时自然显露该背景。
✅ 修改后的代码示例
父组件（触发切换）：
private async Task ShowNextImage()
{
_currentImage = null; // ? 关键：先清空，强制 ImageViewer 渲染空白状态
StateHasChanged(); // 确保立即响应（尤其在同步上下文中）
await Task.Delay(1); // 可选：微小延迟确保 DOM 更新完成（多数情况可省略）
_currentImage = GetNextImage(); // 获取新 ImageInfo（含有效 URL）
StateHasChanged();
}
子组件 ImageViewer.razor：
<div class="loading">
@if (ImageInfo is not null)
{
<img class="attachment" src="@url" alt="Image content" fetchpriority="low">
}
</div>
@code {
[Parameter]
public ImageInfo? ImageInfo { get; set; }
private string url => ImageInfo?.GetImageUrl ?? "";
}
? 提示：添加 fetchpriority="low" 可降低图片加载优先级，减少对关键资源（如交互事件）的影响，提升感知性能。
? 注意事项与进阶建议
- 避免直接设 src="" 或 src="data:,"：这类做法可能触发浏览器错误请求或闪烁，且无法可靠触发 .loading 背景显示；
- StateHasChanged() 的调用时机：在 _currentImage = null 后立即调用，确保 UI 在获取新图前已更新为“无图”状态；
- 服务端优化配合：若加载延迟源于网络或服务端，建议结合 @bind 或 @onload/@onerror 事件进一步增强体验（例如加载失败时 fallback 占位图）；
- CSS 确保背景可见：确认 .loading 容器具有明确宽高（如 width: 100%; height: 400px;），否则 background-image 可能不可见。
通过这种轻量、声明式的状态管理方式，你无需引入第三方库或复杂 JS 互操作，即可在 Blazor 中实现专业级的图片加载体验：旧图即时消失，loading GIF 立即浮现，新图就绪后无缝呈现——真正以用户为中心的响应式设计。
