graphql - React-slick 与 gatsby-plugin-image

Question

我正在尝试将 React-slick 与 gatsby-plugin 图像一起使用，我的页面设置如下。

import React from "react";
import { graphql } from "gatsby"
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { GatsbyImage } from "gatsby-plugin-image"

const settings = {
  autoPlay: true,
  arrows: false,
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
};

const ImgSlide = ({ data }) => {
  return (
    <div>
      <Slider {...settings}>
        <div>
          <GatsbyImage fluid={data.image1.childImageSharp.fluid} />
        </div>
        <div>
        <GatsbyImage fluid={data.image2.childImageSharp.fluid} />
        </div>
      </Slider>
    </div>
  );
};

export const pageQuery = graphql`
  query {
    image1: file(relativePath: { eq: "images/icon.png" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image2: file(relativePath: { eq: "images/icon.png" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default ImgSlide;

当我运行 Gatsby develop 时，我收到一条错误消息，指出 image1 未定义。我真的不知道我在这里错过了什么。我认为这与我尝试定义 image1 的方式有关，但我很确定我已经正确使用了 relativePath，除非我没有正确指定位置。

我确实将同一张图片指定了两次，这只是因为我还没有导入照片，我只是在测试让它工作。

gatsby-config 设置是

module.exports = {
  siteMetadata: {
    title: "Inkd Era",
    description: "Clothing and brand built for tattoo and tattoed culture",
  },
  plugins: [
    "gatsby-plugin-sass",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    "gatsby-transformer-remark",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 650,
            },
          },
        ],
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/src/pages/`,
      },
      __key: "pages",
    },
    {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `Inkd Era`,
      short_name: `Inkd era`,
      start_url: `/`,
      background_color: `#000`,
      theme_color: `#fafafa`,
      display: `standalone`,
      icon: `content/assets/gatsby-icon.png`,
    },
  },
  ],
};

Answer 1

新结构为<GatsbyImage>传递图像时的组件本身正在使用 image prop , 不是 fluid .此外，查询需要获取gatsbyImageData , 不是 fluid正如您在 docs 中看到的那样:

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function BlogPost({ data }) {
  const image = getImage(data.blogPost.avatar)
  return (
    <section>
      <h2>{data.blogPost.title}</h2>
      <GatsbyImage image={image} alt={data.blogPost.author} />
      <p>{data.blogPost.body}</p>
    </section>
  )
}

export const pageQuery = graphql`
  query {
    blogPost(id: { eq: $Id }) {
      title
      body
      author
      avatar {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  }
`

在您的场景中，您正在混合 gatsby-image 方法，来自 Gatsby v2与新 gatsby-plugin-image ，仍处于测试阶段，但它来自 v3 .

如果你想使用 <GatsbyImage> , 根据需要调整查询和组件，否则，使用 gatsby-image恰如其分:

import Img from `gatsby-image`

<Img fluid={data.image1.childImageSharp.fluid} />