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

Posted 2023-05-08

【中文标题】滑动幻灯片内图像周围的奇怪灰色边框

【英文标题】：Weird grey border around an image inside a swiper slide

【发布时间】：2021-12-23 02:11:11

【问题描述】：

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

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

【参考方案1】：

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

更新

如果你删除了 w-full 类 class="object-cover w-full h-full swiper-lazy " 如果没有图像，则不会出现灰色边框。

【讨论】：

即使我添加了一些背景，这些角仍然可见......似乎它们在这些图像中

@MikeL。您是否尝试过使用其他图片（如 jpg）？

这里的事情是，当没有图像时它会出现......当有时我再也看不到这些角落了

@MikeL。好的。一个想法在哪里创建一个占位符图像然后你可以避免这种情况。

@MikeL。我更新了我的回答。如果您删除 w-full 类，它将在没有灰色边框的情况下工作...

【参考方案2】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

我试过了，没用，很遗憾