I'm using vue swiper - https://swiperjs.com/vue, and I basically have a vertical swiper with a Lazy module so that the images inside my slides are loaded in a lazy way. My code is very 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>

The thing that I noticed is that every time my swiper slides (either automatically or manually) the images are getting some weird grey "border" in the beginning, which eventually is replaced with an image. However, if I delete the src and srcset params the "border" is still there, whether the image is rounded or not. The slide looks like this:

I checked all the posible css configs and there is literally nothing - no border, outline, box-shadow, or anything like that. Has anyone encountered such an issue before, how is it possible to solve it?