如何解决swiper/react 无法在组中渲染图像
<Swiper
spaceBetween={5}
lazy
preloadImages={true}
slidesPerColumn={2}
slidesPerView={2}
slidesPerColumnFill="row"
slidesPerGroup={2}
navigation={{
prevEl: prevRef.current ? prevRef.current : undefined,nextEl: nextRef.current ? nextRef.current : undefined,}}
onInit={(swiper:any) => {
swiper.params.navigation.prevEl = prevRef.current;
swiper.params.navigation.nextEl = nextRef.current;
swiper.navigation.update();
}}
pagination={{ clickable: true,}}
// scrollbar={{ draggable: true }}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log("slide change")}
>
{store_card[0].data.map((card,i) => {
return (
<SwiperSlide key={i}>
<Col>
<Card
className="storeCard"
style={{ backgroundImage: `url(${card.imgUrl})`,}}
>
<Title className="cardTitle" level={3}>
{card.title}
</Title>
<CustomBtn
link={card.button.link}
text={card.button.text}
info={false}
// style={{ justifyContent: "end" }}
icon={<RightInfoIcon />}
/>
</Card>
</Col>
</SwiperSlide>
);
})}
</Swiper>
问题
基本上,当我使用 yarn dev
运行 Next.js 应用程序时,图像完美地显示在组中,但是当我创建生产版本时,它隐藏了一些图像,这意味着它们的 HTML 已创建,但它们不是被显示例如如果我在一张幻灯片中有 4 张图片,它会显示其中 2 张并隐藏 2 张。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。