使用下一张图片时，Nextjs Thumbs 未显示在 react-responsive-carousel 中答案

【问题标题】：Nextjs Thumbs is not showing in react-responsive-carousel while using next image使用下一张图片时，Nextjs Thumbs 未显示在 react-responsive-carousel 中
【发布时间】：2022-06-23 14:02:20
【问题描述】：

我使用react-responsive-carousel 显示带有拇指的产品图片库，而我使用一个简单的img HTML 元素显示拇指，但是当我使用下一张图片时拇指消失了，我想知道如何修复这个问题。

    <Carousel showThumbs>
      {images.map((image) => (
        <Box>
          <Badge
            badgeContent="30%"
            color="primary"
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'left',
            }}
            sx={{
              position: 'absolute',
              top: '2rem',
              left: '2.5rem',
            }}
          />
          {/* <img src={image.original} alt="ok" />   this word just fine*/}
          {/* this does not show up thumbs */}
          <Image
            src={image.original}
            alt="piece"
            width={image.originalWidth}
            height={image.originalHeight}
          />
        </Box>
      ))}
    </Carousel>

【问题讨论】：

你能在代码沙盒或任何在线 IDE 中重现相同的内容吗？
您可以尝试几件事：确保originalWidth 和originalHeight 是正数；尝试指定layout prop - 它可以是固有的、固定的、填充的、响应式的、原始的；使用开发人员工具的“元素”选项卡比较这两种情况的呈现方式。

标签： reactjs next.js react-responsive-carousel

【解决方案1】：

这是因为 react-responsive-carousel 无法获取自定义组件内的图片列表，只能从标签或标签内的标签中获取。我认为 nextjs 的 Image 组件也算自定义组件。

参考：https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md

【讨论】：