CODEWITHSUNDEEP
gatsbygatsby-image
Ricardo de Paula
Ricardo de Paula

Reputation: 632

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

I want to migrate from gatsby-image to gatsby-plugin-image. Having problems with Props.

(query already from gatsby-plugin-image)

   

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

Part of template code (passing the props):

   

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

Gatsby-image:(ImageGallery component)

   

 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

I'm using Gatsby-image plugin. I want to migrate to gatsby-plugin-image.

I am getting complicated with passing the props between the components using gatsby-plugin-image.

Upvotes: 1

Views: 400

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

You just need to:

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

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

With the new gatsby-plugin-image you don't need to call for fixed or fluid image anymore, the information is stored inside gatsbyImageData, previously queried and filtered in the GraphQL query.

Upvotes: 1

Related Questions