Vue Swiper轮播slide内图片出现异常灰色边框问题如何解决

问题原因 #

你看到的灰色“边框”本质是Swiper懒加载模块为.swiper-lazy类默认设置的加载状态背景色，并非你自定义的边框类样式，所以排查普通CSS样式会找不到对应配置。

解决方法 #

直接覆盖Swiper的默认样式即可，根据你的项目样式规则选择对应写法：

• 非scoped全局样式写法：

.swiper-lazy {
  background-color: transparent !important;
  /* 若不需要默认加载动画，可额外加下行代码 */
  background-image: none !important;
}

• Vue3 scoped样式写法：

:deep(.swiper-lazy) {
  background-color: transparent;
  background-image: none;
}

• Vue2 scoped样式写法：

/deep/.swiper-lazy {
  background-color: transparent;
  background-image: none;
}

修改完成后即可清除图片加载前的灰色背景块，你可以根据需求将transparent替换为和父容器一致的背景色，实现更统一的加载视觉效果。

内容的提问来源于stack exchange，提问作者Mike L.