如何解决为什么在带有 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 举报,一经查实,本站将立刻删除。