Gatsby-image support

Gatsby's previously recommended image component, gatsby-image, is now replaced by gatsby-plugin-image. Although Prismic's Gatsby plugin supports gatsby-image, it has been deprecated by Gatsby. We recommend all users migrate to gatsby-image-image instead.

If you need to continue using gatsby-image, you can query image data similarly to the gatsby-plugin-image queries listed above.

Imgix transformed images

Rather than querying for gatsbyImageData like shown above, you may query for fixed or fluid depending on the presentation of your image.

Use this pattern, where ...ImageFragment is one of the following fragments:

  • GatsbyImgixFixed
  • GatsbyImgixFixed_noBase64
  • GatsbyImgixFluid
  • GatsbyImgixFluid_noBase64
query Home {
  prismicHomepage {
    data {
      example_image {
        fluid {
           ...ImageFragment
        }
      }
    }
  }
}

Locally transformed images

Rather than querying for gatsbyImageData like shown above, you may query for fixed or fluid depending on the presentation of your image.

Use this pattern, where ...ImageFragment is one of the gatsby-transformer-sharp fragments.

query Pages {
  allPrismicPage {
    nodes {
      data {
        imageFieldName {
          localFile {
            childImageSharp {
              ...ImageFragment
            }
          }
        }
      }
    }
  }
}