我无法在 gatsby-plugin-image 上传递道具

Question

我想从 gatsby-image 迁移到 gatsby-plugin-image。道具有问题。

（已从 gatsby-plugin-image 查询）

   

 query MyQuery {
      shopifyProduct(
        shopifyId: {eq: $shopifyId}
      ) {
        title
        description
        images {
          localFile {
            childImageSharp {
              gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED, formats: WEBP)
            }
          }
        }
      }
    }

部分模板代码（传递道具）：

   

   <div>
     <ImageGallery images={props.data.shopifyProduct.images} />
</div>

Gatsby-image:(ImageGallery 组件)

   

 import React from 'react'
import Image from 'gatsby-image'

    const ImageGallery = ({ images }) => {
      return (
        <div>
          <Image fluid={images[0].localFile.childImageSharp.fluid} />
        </div>
      )
    }

    export default ImageGallery

我正在使用 Gatsby-image 插件。我想迁移到 gatsby-plugin-image.

我对使用 gatsby-plugin-image 在组件之间传递 props 感到很复杂。

Answer 1

您只需要：

import { GatsbyImage } from "gatsby-plugin-image"

const ImageGallery = ({ images }) => {
  return (
    <div>
     <GatsbyImage image={images[0].localFile.childImageSharp.gatsbyImageData} alt=""/>
    </div>
  )
}

使用新的 gatsby-plugin-image，您不再需要调用固定或流动图像，信息存储在 gatsbyImageData 中，之前在 GraphQL 查询中查询和过滤。

我无法在 gatsby-plugin-image 上传递道具

I'm having trouble to passing props on gatsby-plugin-image

gatsby

gatsby-image