我正在尝试使用gatsby-image来构建react-bootstrap轮播,因为标准img标签的加载速度很慢。但是,我面临的问题是我想为文件夹中的所有图像而不是像gatsby-starter-default中的每个文件编写单个组件。
因此,我希望Image组件返回可在诸如<Image[0] />
这样的轮播中使用的图像数组。或将relativePath传递给Carousel内部的组件,例如<Image(carouselImages/carousel_1.jpeg) />
请参见下面的carousel.js(为便于阅读,减少到2张幻灯片)代码。
import React from 'react'
import Carousel from 'react-bootstrap/Carousel'
import Button from 'react-bootstrap/Button'
import './style.scss'
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
import Image1 from 'components/img1'
import Image2 from 'components/img2'
class ControlledCarousel extends React.Component {
constructor(props, context) {
super(props, context)
this.handleSelect = this.handleSelect.bind(this)
this.state = {
index: 0,
direction: null,
}
}
handleSelect(selectedIndex, e) {
this.setState({
index: selectedIndex,
direction: e.direction,
})
}
render() {
const { index, direction } = this.state
return (
<Carousel
activeIndex={index}
direction={direction}
onSelect={this.handleSelect}>
<Carousel.Item>
<div className="imgWrapper">
<Image1 />
</div>
<Carousel.Caption>
<p> some text </p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<div className="imgWrapper">
<Image2 />
</div>
<Carousel.Caption>
<p> some text </p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
)
}
}
export default ControlledCarousel
还有一个Image组件本身:
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
const Image = () => (
<StaticQuery
query={graphql`
query {
placeholderImage: file(relativePath: { eq: "carouselImages/carousel_1.jpg" }) {
childImageSharp {
fluid(maxWidth: 2500) {
...GatsbyImageSharpFluid
}
}
}
}
`}
render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
/>
)
export default Image
关于使它协同工作的正确方法的任何建议?非常感谢您的帮助。
答案 0 :(得分:0)
在src / images中打开一个文件夹,并将所有图片放在此处,然后使用StaticQuery中的过滤器搜索该文件夹中的所有图片。
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';
import Carousel from 'react-bootstrap/Carousel';
export default () => (
<StaticQuery
query={graphql`
query {
allFile(filter: {relativeDirectory: {eq: "carousel"}}) {
edges {
node {
childImageSharp {
fluid(quality: 90) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`}
render={data=> (
<Carousel className="full-width-md d-none d-md-block">
{data.allFile.edges.map(pic =>
<Carousel.Item>
<Img fluid={pic.node.childImageSharp.fluid}/>
</Carousel.Item>
)}
</Carousel>
)}
/>
);