Section: require('./custom_types/section.json'), Homepage: require('./custom_types/homepage.json'), Header: require('./custom_types/header.json'), Hero: require('./custom_types/hero.json'),Ĭontact_form: require('./custom_types/contact_form.json'), LinkResolver: require('./src/utils/LinkResolver').linkResolver, I am thinking the image path in graphql I am using is incorrect. The project I am working on is a single page app with nested components. I am trying to preload dynamic images with gatsby-plugin-image. I am trying to download images locally with the shouldDownloadFiles option for gatsby-source-prismic. Like others, I am unable to get any values when trying to use localFile. Passed to the wrapper element.I have seen this topic before and I can't happen to find any answers to my issue. When prop is an array it has to be combined with media keys, allows for art directing fluid images.įading duration is set up to 500ms by default When prop is an array it has to be combined with media keys, allows for art directing fixed images.ĭata returned from the fluid query. gatsby-image props Nameĭata returned from the fixed query. While you could achieve a similar effect with plain CSS media queries, gatsby-image accomplishes this using the tag, which ensures that browsers only download the image they need for a given breakpoint. Installĭepending on the gatsby starter you used, you may need to include gatsby-transformer-sharp and gatsby-plugin-sharp as well, and make sure they are installed and included in your gatsby-config. The gatsby-image component automatically sets up the “blur-up”Įffect as well as lazy loading of images further down the screen. The GraphQL query creates multiple thumbnails with optimized JPEG and PNGĬompression. Which specify the fields needed by gatsby-image.
0 Comments
Leave a Reply. |