Gatsby: Download images from Prismic to use in gatsby-image

[ppsirius]

I use gatsby-source-prismic-graphql and want to use gatsby-image. Plugin from prismic doesn't support that feature so I thinking about workaround.
I want to download files and then try to use plugin form images.
I have that query in page component (but also want to work with templates):

const homepageQuery = useStaticQuery(graphql`
    query PrismicQuery {
      prismic {
        allHomepages {
          edges {
            node {
              section1_image
            }
          }
        }
      }
    }`
)

I check gatsby-plugin-remote-images but I must give there nodeType but I don't have few of them, not one :[

[daydream05]

You would need to use gatsby-transformer-sharp and gatsby-plugin-sharp so you can use gatsby-image. On your query it would look something like this:

const homepageQuery = useStaticQuery(graphql`
    query PrismicQuery {
      prismic {
        allHomepages {
          edges {
            node {
              section1_image {
                localFile {
                  childImageSharp {
                    fluid(quality: 100) {
                      ...GatsbyImageSharpFluid_withWebp
                    }
                  }
                }
              }
            }
          }
        }
      }
    }`
)

And gatsby-config.

module.exports = {
  plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],
}

[ppsirius]

@daydream05 gatsby-image under the hood use gatsby-transformer-sharp and this plugin also not supported.

[daydream05]

@ppsirius Have you tried it? This is how it's usually done with sources that doesn't have their own image processing. You pull from the source, and you apply transformer sharp on it. If you look at wordpress source plugin, this is how they query it as well.

I also use Prismic for one of my sites, and looking at my codebase, I can't think of any other way how I was able to do it.

Here's an example codebase of how to use gatsby-image with Prismic. If you check, it also uses gatsby-transformer-sharp and gatsby-plugin-sharp and the query uses localFile and childImageSharp

[LekoArts]

@daydream05 He is using the GraphQL plugin, not the normal source plugin :)

@freiksenet Could you chime in here and maybe answer if this is possible / when this is possible?

[daydream05]

@LekoArts good call! So sorry about that @ppsirius . These amazing people should be able to help you better

[ppsirius]

@daydream05 Not at all, thanks to You I notice that I use a different plugin that doesn't support image optimization. I switch to right plugin and everything works fine :sunglasses:

[kamilDevguru]

@ppsirius so what is the right plugin?

[ppsirius]

@kamilDevguru gatsby-source-prismic :sunglasses:

[mathiasha]

@ppsirius So you got gatsby-plugin-remote-images to work with images from Prismic? Would you be able to share some of your code?

[ppsirius]

@mathiasha As I mentioned earlier I use gatsby-source-prismic here You have code where I use it.

[umxr]

How is it possible to use Gatsby's Image Processing with Prismic when i get a json string returned from my query?

[ppsirius]

@umxr you using the Prismic json the same as is written in Gatsby documentation. You could also look at my example

[umxr]

@ppsirius im a little confused..In Prismic what is the type of section1_image is it an image? or is it something else.

[ppsirius]

yes

[umxr]

@ppsirius I get this error if I try what you suggested.

This is my query:

<StaticQuery
    query={graphql`
      query {
        prismic {
          allNavigations(type: "navigation") {
            edges {
              node {
                navigation_contact
                body {
                  ... on PRISMIC_NavigationBodyNavigation_item {
                    fields {
                      navigation_label
                      navigation_link {
                        ... on PRISMIC_Page {
                          _meta {
                            uid
                          }
                        }
                      }
                    }
                  }
                  ... on PRISMIC_NavigationBodySocial_link {
                    type
                    fields {
                      social_item_icon
                      social_item_link {
                        ... on PRISMIC__ExternalLink {
                          url
                        }
                      }
                      social_item_title
                    }
                  }
                }
                logo {
                  localFile {
                    childImageSharp {
                      fluid(maxWidth: 1920, quality: 90) {
                        ...GatsbyImageSharpFluid_withWebp
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    `}
    render={data => (
      <Header data={data.prismic.allNavigations.edges[0].node} {...props} />
    )}
  />

[ppsirius]

You use gatsby-source-prismic?
What exactly you see in grapQL playground on this logo?

[umxr]

@ppsirius Hey, sorry for the delayed response. I was using the incorrect plugin. i switched over to gatsby-source-prismic and it all worked. Thanks!

[lucashfreitas]

I think most users have a confusion between two plugins available: gatsby-source-prismic-graphql and gatsby-source-prismic.

Please see this link: https://user-guides.prismic.io/en/articles/3647135-how-to-migrate-a-project-from-gatsby-source-prismic-to-gatsby-source-prismic-graphql.

You can use localFile if you are using gatsby-source-prismic, otherwise you will get an error.

If you are using gatsby-source-prismic-graphql, you should see another attribute for gatsby image after image field by itself as the example below:

node { image_field image_fieldSharp { childImageSharp { fixed { base64 } } } }