为啥 Carousel 不接受 Next.js 图片?

Posted

技术标签:

【中文标题】为啥 Carousel 不接受 Next.js 图片?【英文标题】:Why does Carousel not accept Next.js Image?为什么 Carousel 不接受 Next.js 图片? 【发布时间】:2021-05-15 15:10:19 【问题描述】:

我们在Next.js 项目中使用react-responsive-carousel。当我们用Image 替换img 以优化缩略图图像大小时,缩略图消失了。你知道为什么吗?

【问题讨论】:

【参考方案1】:

看起来是limitation of react-responsive-carousel

请注意,无法在自定义组件中渲染图像。如果拇指被渲染为轮播的直接子元素,或者它们位于 div 或其他普通 html 元素中,并且可以从轮播中访问这些元素的子元素,则轮播将找到拇指。 出于性能原因,无法在自定义组件中获取图像。

next/image<img> 元素的包装,这意味着Carousel 无法为缩略图拾取图像。

【讨论】:

您会为 Next.js 推荐其他轮播工具吗?

以上是关于为啥 Carousel 不接受 Next.js 图片?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 Next JS 性能分数在 web.dev 中如此不一致?

构建与本地开发的 Next.JS 问题

在 Next.js 中,为啥要静态渲染? _document.js 包括 getInitialProps

为啥我无法使用 Next.js 的 getInitialProps 获取我的 Metamask 帐户地址?

为啥我们在 MongoDB 的 Next.js 应用程序中有 api 文件夹?

Next.js 中为啥没有通过 getServerSideProps 将 cookie 发送到服务器?