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

问题描述

我想从 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 变得越来越复杂。

解决方法

您只需要：

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 查询中进行了查询和过滤。