我是新来的反应,所以我试图在反应中放大图像。我使用 swiper js 来显示产品图像,但对于缩放我使用react-image-magnify但它不起作用。react-image-magnify 在 swiper js 外部工作,但不在内部工作。有什么解决办法吗?
<Swiper
navigation
loop={true}
thumbs={{ swiper: props.thumbsSwiper }}
>
{
productData.gallery.map((item, idx) =>
<SwiperSlide key={`image-slides-${idx}`}>
<div className="slide-item" key={`image-slides-${idx}`}>
<div className="slide-item__thumb">
<ReactImageMagnify {...{
smallImage: {
alt: 'Product Thumbnail',
isFluidWidth: true,
src: item.url,
className: "img-fluid",
},
largeImage: {
src: item.url,
width: 1200,
height: 1800,
},
enlargedImageContainerDimensions: {
width: '200%',
height: '100%'
}
}} />
{/*<img className="img-fluid" src={item.url} alt="Product Thumbnail" />*/}
</div>
</div>
</SwiperSlide>)
}
</Swiper>