反应:我没有看到缩略图时使用反应-反应-旋转木马

Question

我遵循了演示代码，除了thumbnails之外，所有的代码都运行良好。我将其设置为true，以便在html中可以看到thumbnails的“ul”，但它没有任何image src。

下面是代码。

import React from 'react';

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

import Image from 'next/image';

const Banner = ({ carousel, isDifferent, className }) => {
  return (
    <div>
      <Carousel autoPlay infiniteLoop showThumbs>
        {carousel.length !== 0 &&
          carousel?.map((item, idx) => (
            <div className={`relative w-full ${className} cursor-pointer`} key={idx}>
              <Image src={isDifferent ? item?.node?.mediaItemUrl : item.node.bannerInfo.bannerImage.mediaItemUrl} alt="banner" objectPosition="center top" layout="fill" objectFit="cover" priority />
            </div>
          ))}
      </Carousel>
    </div>
  );
};

export default Banner;

我就是这样使用Banner组件的

      <Banner carousel={product.galleryImages.edges} isDifferent className="md:hidden h-[400px]" />

当我检查开发工具时，我看到了ul。

​

​

请让我知道我错过了什么。

Answer 1

如果不直接使用img元素，则需要使用renderThumbs呈现缩略图。

示例：

  renderThumbs={() =>
                    mThumbnails.map((thumbnail) => (
                        <Image src={thumbnail.src} alt={thumbnail.alt} key={thumbnail.src} />
                    ))
                }