Search code examples
javascriptcssswiper.js

Weird grey border around an image inside a swiper slide

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:

enter image description here

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?

Solution

  • If you have a white background I would add to the parent or the img element white background. I see that you use tailwindcss then add bg-white.

    update

    if you remove the class w-full from class="object-cover w-full h-full swiper-lazy " then you won't get the gray border if you don't have an image.