React中Swiper JS配置Zoom图片缩放功能失效问题求解

失效原因是三个必填配置项缺失：

• 未引入Zoom模块，也未将其注册到Swiper的modules数组中
• 未在Swiper组件上声明开启zoom配置
• 可缩放的img标签未被类名为swiper-zoom-container的容器包裹，这是Zoom模块的强制DOM结构要求

修复步骤：

1. 从swiper/modules中引入Zoom模块，同时引入zoom对应的样式文件
2. 将Zoom加入Swiper的modules配置数组
3. 给Swiper组件添加zoom属性，可直接传布尔值true开启默认配置，也可传对象自定义最大/最小缩放比例等参数
4. 每个轮播项内需要缩放的img标签，外层套类名为swiper-zoom-container的容器即可

修复后的完整代码：

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Zoom } from 'swiper/modules';
// 引入对应样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/zoom';

const Blog = () => {
  return (
    <Swiper
      modules={[Navigation, Zoom]}
      slidesPerView={2}
      spaceBetween={40}
      navigation
      // 开启zoom，自定义配置最大放大3倍
      zoom={{
        maxRatio: 3,
        minRatio: 1
      }}
    >
      {slideObj.map((obj) => (
        <SwiperSlide key={obj.imageUrl}>
          {/* zoom识别的必填容器 */}
          <div className="swiper-zoom-container">
            <img className="blog__image" src={obj.imageUrl} alt="Photo" />
          </div>
          <div className="blog__text">{obj.discription}</div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default Blog;

配置完成后默认支持PC端双击缩放、移动端双指捏合缩放、放大后拖拽查看图片功能，无需额外绑定事件。

内容的提问来源于stack exchange，提问作者Adlan