时间戳

首页 > 解决方案 > 滑动幻灯片内图像周围的奇怪灰色边框

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

问题描述

我正在使用 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 配置，实际上什么都没有——没有边框、轮廓、框阴影或类似的东西。以前有没有人遇到过这样的问题，如何解决？

标签： javascriptcssswiper

解决方案

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

更新

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

推荐阅读