集成react-image-magnify与swiper/react时缩放容器不显示求助

我将react-image-magnify集成到使用swiper/react作为轮播组件的电商项目中，集成已完成，但鼠标悬停图片时无法看到缩放容器，以下是产品缩略图组件代码：

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Thumbs } from "swiper";
import ReactImageMagnify from "react-image-magnify";
import Image from "next/image";
import { defaultImageLoader } from "../../../../common/utils";
import styles from "../../../../styles/components/Pages/ProductPage/ProductDetailsSection/ProductThumbsGallery.module.css";

const ProductThumbsGallery = ({ images }) => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <div className={styles.productThumbsGallery}>
      <div className={styles.productBoxTop + " " + "product-box-top-swiper-box"}>
        <Swiper
          spaceBetween={10}
          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
          modules={[FreeMode, Thumbs]}
          className="mySwiper2"
        >
          {images.map((image) => (
            <SwiperSlide key={image.id}>
              <ReactImageMagnify
                {...{
                  smallImage: {
                    isFluidWidth: true,
                    src: image.url,
                    sizes: "(min-width: 800px) 33.5vw, (min-width: 415px) 50vw, 100vw",
                  },
                  largeImage: {
                    alt: "",
                    src: image.url,
                    width: 1200,
                    height: 1800,
                    style: "z-index: 100"
                  },
                  enlargedImageContainerStyle: {
                    backGroundColor: "black",
                    zIndex: "100"
                  },
                  isHintEnabled: true,
                }}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

      <div className={styles.productBoxBottom + " " + "product-box-bottom-swiper-box"}>
        <Swiper
          onSwiper={setThumbsSwiper}
          spaceBetween={10}
          slidesPerView={4}
          freeMode={true}
          watchSlidesProgress={true}
          modules={[FreeMode, Thumbs]}
          className="mySwiper"
        >
          {images.map((thumbnail) => (
            <SwiperSlide key={thumbnail.id}>
              <div className={styles.tgBottomBoxImg}>
                <Image
                  src={thumbnail.url}
                  loader={defaultImageLoader}
                  alt="Loading"
                  layout="intrinsic"
                  width={850}
                  height={850}
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
};

export default ProductThumbsGallery;

排查与修复建议 #

• 修正样式属性错误：enlargedImageContainerStyle中的backGroundColor拼写错误，改为backgroundColor；同时将z-index的值从字符串"100"改为数字100，确保样式生效。
• 解除容器裁切限制：检查Swiper容器及父元素的overflow属性，给product-box-top-swiper-box和对应SwiperSlide添加overflow: visible，避免缩放容器被裁切：

  // 给SwiperSlide添加样式
  <SwiperSlide key={image.id} style={{ overflow: 'visible' }}>
  

  在CSS模块中补充：

  .product-box-top-swiper-box {
    overflow: visible;
  }
  

• 避免Swiper事件拦截：Swiper可能阻止鼠标事件冒泡，给ReactImageMagnify组件添加pointer-events: auto样式，确保悬停事件能被正确捕获：

  <ReactImageMagnify
    style={{ pointerEvents: 'auto' }}
    // 其他属性保持不变
  />
  

• 验证大图资源有效性：确认largeImage.src的图片路径正确，且设置的尺寸（width:1200, height:1800）与实际资源匹配，无效或尺寸不匹配的大图可能导致缩放容器不显示。

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