0
129
ViewsWeird 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:
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?
2 answers
Answer question0
If you have a white background i would add to the parent or the img element white background. I see that you use taildwindcss then add bg-white.
update
if you remove the class w-full from
class="object-cover w-full h-full swiper-lazy "
then you dont will get the gray border if you dont have an image.
0
I think your img element is too small. Try increasing its size