滑动器幻灯片内图像周围的奇怪灰色边框

Question

我正在使用 vue swiper - https://swiperjs.com/vue，我基本上有一个带有 Lazy 模块的垂直滑动器，这样我的幻灯片中的图像就会以惰性方式加载。我的代码很简单：

<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>

我注意到的是，每次我的滑动器滑动（自动或手动）时，图像开始时都会出现一些奇怪的灰色“边框”，最终会被图像替换。但是，如果我删除 src 和 srcset 参数，“边框”仍然存在，无论图像是否为圆形。幻灯片看起来像这样：

我检查了所有可能的 css 配置，实际上什么都没有——没有边框、轮廓、框阴影或类似的东西。有没有人遇到过这样的问题，怎么解决的？

Answer 1

我认为您的 img 元素太小了。尝试增加它的大小

Answer 2

如果您有白色背景，我会添加到父级或 img 元素白色背景。我看到您使用了 taildwindcss 然后添加 bg-white.

更新

如果您从中删除 class w-full class="object-cover w-full h-full swiper-lazy " 那么如果你没有图像，你就不会得到灰色边框。

滑动器幻灯片内图像周围的奇怪灰色边框

Weird grey border around an image inside a swiper slide

javascript

css

swiper

更新