我正在使用vue swiper-https://swiperjs.com/vue,，我基本上有一個帶惰性模塊的垂直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>

我注意到的事情是，每次我的swiper滑動(自動或手動)圖像都變得有些奇怪的灰色& quotborder & quot在開始的時候，它最終被一個圖像所取代。但是，如果我刪除src和srcset參數(shù)border & quot仍然存在，不管圖像是否是圓形的。這張幻燈片看起來像這樣:

我檢查了所有可能的css配置，實際上什么也沒有——沒有邊框、輪廓、方框陰影或類似的東西。以前有人遇到過這樣的問題嗎？如何解決它？

如果你有一個白色背景，我會添加到父元素或img元素的白色背景。我看到你用taildwindcss然后加bg-white。

更新 如果您將w-full類從 class = & quotobject-cover w-full h-full swiper-lazy & quot； 如果你沒有圖片，你就不會看到灰色的邊框。

我覺得你的img元素太小了。嘗試增加它的大小

我在使用swiper API的v8和100%寬度的圖像(并使用srcset)時遇到了相同或非常相似的問題:

移除寬度解決了這個問題，但是對于我的情況來說，圖像顯示得太小了(我使用object-fit: cover)。

我可以通過將選項loadontransferstart設(shè)置為true來解決這個問題:https://V8 . swiper js . com/swiper-API # param-lazy-loadontransferstart。 使用loadPrevNext: true選項也可以。此外，使用背景圖像時，不會出現(xiàn)此問題。

唯一的缺點是，如果直接從導(dǎo)航中選擇圖像，灰色邊框會再次出現(xiàn)。