Question

我一直试图弄清楚如何将Gatsby-image与组件一起使用，但我似乎无法弄清楚。

我正在使用Gatsby图像，gatsby-transformer-sharp，gatsby-plugin-sharp。

这是我的查询

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "tbbs1.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

并像许多教程所示的那样使用它可以正常工作：

<Img fluid={props.data.imageOne.childImageSharp.fluid} />

这是组件

import React, { Component } from "react";
import Slider from "react-slick";
import Img from "gatsby-image";


export default class SimpleSlider extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
  }
  next() {
    this.slider.slickNext();
  }
  render() {
    const settings = {
      dots: true,
      lazyLoad: 'progressive',
      arrows: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };

    let slides = this.props.bilder.map( (item, index) =>
      (
        <div key={index} className="slide-container">
          <div className="slider-box" onClick={this.next}>
            <img src={this.props.bilder[index]} alt=""/>
          </div>
        </div>
      )
    );

    return (
      <div id="work" className="slick-container">
        <div className="title-desc-container">
          <h3>{this.props.title}</h3>
          <p>{this.props.desc}</p>
        </div>
        <Slider ref={c => (this.slider = c)} {...settings}>
          {slides}
        </Slider>
      </div>
    );
  }
}

但是我想做的是这样的：

<SimpleSlider title="title" desc="description" images={[props.data.imageOne.childImageSharp.fluid, props.data.imageTwo.childImageSharp.fluid]} />

我猜想有一个简单的解决方案，但是我还没有找到。

非常感谢您的帮助！

谢谢！

Answer 1

您的代码中有两个错误。

您正在使用HTML标签<img />。您必须使用<Img />中的gatsby-image组件才能使其正常工作（您正在导入它，但未使用它）。
您没有将任何bilder道具传递给组件，而是试图在SimpleSlider组件中调用它。只需绘制您的images道具就足够了。（或通过所需的bilder道具）

按如下所示重构您的SimpleSlider：

import React, { Component } from "react";
import Slider from "react-slick";
import Img from "gatsby-image";


export default class SimpleSlider extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
  }
  next() {
    this.slider.slickNext();
  }
  render() {
    const settings = {
      dots: true,
      lazyLoad: 'progressive',
      arrows: false,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };

    return (
      <div id="work" className="slick-container">
        <div className="title-desc-container">
          <h3>{this.props.title}</h3>
          <p>{this.props.desc}</p>
        </div>
        <Slider ref={c => (this.slider = c)} {...settings}>
          {this.props.images.map((image, index) => (
            <div key={index} className="slide-container">
              <div className="slider-box" onClick={this.next}>
                <Img src={image} style={{width: 200, height: 200}}/>
              </div>
            </div>
          ))}
        </Slider>
      </div>
    );
  }
}

如何将Gatsby-Image作为属性发送到组件

1 个答案: