为什么在带有 StaticQuery 和 GatsbyImage 的组件中 react-bootstrap carousel 只在 Safari 上加载第一张图片？

问题描述

我正在处理一个 React Gatsby 项目，想要创建一个轮播图来显示一些图像。为了简单和性能，我想使用 react-bootstrap 和 GatsbyImage。

我遇到的问题是轮播仅在 Safari 上加载第一张图像，而在 Chrome 上正确加载。但是，我可以看到轮播希望有 5 张图片，但下一张图片永远不会加载。

Carousel 位于组件 <RoomSlide /> 内，而该组件又是加载到索引页面上的另一个组件 <AboutUs /> 的一部分。

import React from "react"
import { graphql,StaticQuery } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import { Carousel } from "react-bootstrap"

import 'bootstrap/dist/css/bootstrap.min.css';

const RoomSlider = () => (
    <StaticQuery 
        query={graphql`
            query {
                slideShow: allFile(
                    filter: {
                        relativeDirectory: {
                            eq: "carousel"
                        }
                    }
                ) {
                    edges {
                        node {
                            id
                            relativePath
                            base
                            childImageSharp {
                                gatsbyImageData(
                                    height: 600
                                    width: 900
                                    placeholder: BLURRED
                                    quality: 70
                                    blurredOptions: {width: 100}
                                )
                            }
                        }
                    }
                }
            }
        `}

        render={data => (
            <Carousel>
                {data.slideShow.edges.map(({node}) => (
                    <Carousel.Item key={node.id}>
                        <GatsbyImage image={node.childImageSharp.gatsbyImageData} alt={node.base} />
                    </Carousel.Item>
                ))}
            </Carousel> 
        )}
        />
)

export default RoomSlider;

我最初尝试学习本教程 How to Build a Carousel in Gatsby v3 using React Bootstrap the loads CRAZY QUICK!

但是，他在索引页面内加载了轮播，我不想这样做。 通过阅读这篇 How to include a carousel component in Gatsby with Contentful?，我想出了如何修改我的查询以便它可以在组件内工作，在本例中使用 StaticQuery。

以下是我阅读的其他一些相关帖子，但没有回答我的问题：

How to use react-bootstrap carousel with gatsby-image?

How do I query multiple images with gatsby-image?

我也没有在 the gatsby-plugin-image documentation

中找到任何关于此的信息

任何帮助都在很大程度上受到赞赏。提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）