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
}
}
}
}
}
}
}