当StateHasChanged

Question

我有一个服务器端Blazor应用程序，其中显示了一些带有图像的文章，这些文章是通过JS“ lazysizes.js”（https://github.com/aFarkas/lazysizes）加载的。

在Blazor中，ArticleComponent的这一部分负责内容：

<div class="article-img">
    @if (Article.HasImageUrl)
    {
        <picture>
            <source data-srcset="img/@AppState.MultiStore.Key/@(Article.ImageUrlWebP)" type="image/webp">
            <img data-src="img/@AppState.MultiStore.Key/@Article.ImageUrl" class="lazyload" alt="@Article.ImageUrl" />
         </picture>
     }
</div>

1. 加载所有Articles时，将以正确的方式延迟加载正确的图像（在data-srcset中为R1图像，在src / srcset中也为延迟加载）。

<div class="article-img">
    <picture>
        <source data-srcset="img/KAORU/R1.webp" type="image/webp" srcset="img/KAORU/R1.webp">
        <img data-src="img/KAORU/R1.png" class=" lazyloaded" alt="R1.png" src="img/KAORU/R1.png">
    </picture>
</div>

1. 现在，当在“搜索”文本框中键入内容时，该元素将被此字符串过滤并通过Blazor（在该DIV位置上的旧元素，在此情况下为V6_gurkensalat.webp而不是R1.webp）重新绘制。

    <div class="article-img">
        <picture>
            <source data-srcset="img/KAORU/R1.webp" type="image/webp" srcset="img/KAORU/V6_gurkensalat.webp">                        
            <img data-src="img/KAORU/R1.png" class=" lazyloaded" alt="R1.png" src="img/KAORU/V6_gurkensalat.png">
        </picture>
    </div>

1. 问题在于引擎会“记住” CSS类和图片/图片HTML标签的src值。

手动解决方案是将类从“延迟加载”更改为“延迟加载”以刷新图像（如此链接中的说明：https://github.com/aFarkas/lazysizes/issues/46）

问题是，为什么Blazor不会将类/ src更新回源代码中所解释的内容，我如何“教导” Blazor进行全面更新以显示正确的图像？

谢谢！