У меня есть серверное приложение 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>
- Когда все статьи загружены, правильные изображения лениво загружаются правильным способом (изображение R1 в data-srcset и после ленивая загрузка также в sr c / 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>
Теперь при вводе в текстовое поле поиска элементы фильтруются по этой строке и перекрашиваются через 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>
![enter image description here](https://i.stack.imgur.com/ToPq3.png)
- Проблема в том, что движок «запоминает» класс CSS и значение sr c тега picture / image HTML.
Ручным решением было бы изменить класс с "lazyloaded" на "lazyload", чтобы обновить sh изображение (как описано в этой ссылке: https://github.com/aFarkas/lazysizes/issues/46)
Проблема в том, почему Blazor не обновляет класс / sr c обратно до того, что объясняется в исходном коде, и как я могу «научить» Blazor полностью обновляться, чтобы отображать правильные изображения?
Спасибо!