У меня есть приложение для одностраничной реакцииЯ использую lazysizes для ленивой загрузки своих изображений.
На производстве я вижу, что при загрузке изображения data-src добавляет атрибут src, а data-srcset добавляет атрибут srcset.Однако, когда я ухожу и загружаю другую страницу, значения атрибутов data-srcset и data-src отличаются, как и следовало ожидать, но атрибуты src и srcset относятся к предыдущей странице.Значение не обновлялось, поэтому страница не может получить новое изображение и в итоге отображает старое изображение.
Добавляем тег изображения:
<img data-expand="1" data-srcset={srcset} data-src={image} className="lazyload"/>
Первая загрузка:
<img data-expand="1" data-srcset="ABC1 1x, ABC2 2x, ABC3 3x" data-src="/image/ABC.png" srcset="ABC1 1x, ABC2 2x, ABC3 3x" src="/image/ABC.png">
Вторая загрузка (после загрузки другой страницы. data-srcset и data-src обновляются, но не ванильные srcset и src теги):
<img data-expand="1" data-srcset="XYZ1 1x, XYZ2 2x, XYZ3 3x" data-src="/image/XYZ.png" srcset="ABC1 1x, ABC2 2x, ABC3 3x" src="/image/ABC.png">
Вот как я добавляюlazysizes
<script src="lazysizes.min.js" async=""></script>