Search code examples
gatsbygatsby-image

Using gatsby-image without GraphQL?


Unfortunately, we are using Gatsby but foregoing many of its features like GraphQL. I would like to still use gatsby-image. Even though I won't be able to benefit from the resizing transformations, I'd like to get the other benefits like lazy loading and placeholders. Is there any way to do this by just passing in a url instead of passing in the result of a GraphQL query?


Solution

  • The Gatsby docs have a page on foregoing GraphQL. In short: no, gatsby-image isn't designed to work outside of Gatsby's GraphQL data layer. While it is possible to build without GraphQL, you'll lose many of the advantages that distinguish Gatsby from alternatives. To quote:

    It’s also possible to use an “unstructured data” approach in Gatsby sites, no GraphQL required. [...]

    Working outside of the data layer [however] means foregoing the optimizations provided by transformer plugins, like:

    • gatsby-image (speedy optimized images),
    • gatsby-transformer-sharp (provides queryable fields for processing your images in a variety of ways including resizing, cropping, and creating responsive images),
    • … the whole Gatsby ecosystem of official and community-created transformer plugins.

    (emphasis added)


    Hope this helps!