Estoy usando vue swiper - https://swiperjs.com/vue , y básicamente tengo un swiper vertical con un módulo Lazy para que las imágenes dentro de mis diapositivas se carguen de forma perezosa. Mi código es muy simple:

 <Swiper> <SwiperSlide> <div class="flex items-center gap-5"> <div class="overflow-hidden rounded-full w-14 h-14"> <img :data-src="/image.png" :data-srcset="/image.png 2x" class="object-cover w-full h-full swiper-lazy" > </div> <div class="flex flex-col col-span-3"> <p class="text-sm font-medium text-gray-900"> Title </p> <p class="text-xs text-gray-600"> Subtitle </p> </div> </div> </SwiperSlide> </Swiper>

Lo que noté es que cada vez que mi swiper se desliza (ya sea de forma automática o manual), las imágenes obtienen un extraño "borde" gris al principio, que finalmente se reemplaza con una imagen. Sin embargo, si elimino los parámetros src y srcset el "borde" todavía está allí, ya sea que la imagen esté redondeada o no. La diapositiva se ve así:

Revisé todas las configuraciones posibles de css y literalmente no hay nada, ni bordes, contornos, sombras de cuadros ni nada por el estilo. ¿Alguien ha encontrado un problema así antes, cómo es posible resolverlo?