Both syntaxes are shown in the reference below. Option values: In the StaticImage component, props such as layout and placeholder take a string, while the resolver takes a a GraphQL enum, which is upper case by convention and is not quoted like a string.
#Gatsby fluid image how to
How to pass options: When using StaticImage, options are passed as props to the component, whereas for the GatsbyImage component they are passed to the gatsbyImageData GraphQL resolver. There are a few differences between how you specify options for StaticImage and GatsbyImage: The image data object, returned from the gatsbyImageData resolver. These props are passed directly to the component, and are not to be confused with image options, which are passed to the GraphQL resolver when using dynamic images. This component accepts all shared props, as well as the one below. The className or imgClassName prop is helpful if your styling library is giving you a computed class name string instead of the computed styles (e.g. If you need to style the tag, you can use imgStyle or imgClassName. Note that in all of these cases the styling is applied to the wrapper, not the image itself. You can also use a regular style or className prop.
#Gatsby fluid image code
Unfortunately the css prop from styled-components turns the code into a styled function under the hood and as explained above StaticImage doesn’t support that syntax. If you use Emotion you can use the provided css prop instead: The parser relies on being able to identify StaticImage components in the source, and passing them to a function means this is not possible. The StaticImage component does not support higher-order components, which includes the styled function from libraries such as Emotion and styled-components. Using StaticImage with CSS-in-JS libraries If you find yourself wishing you could use a prop for the image src then it’s likely that you should be using a dynamic image. You can use variables and expressions if they’re in the scope of the file, e.g.: You can either use static values, or variables within the component’s local scope. The values need to be statically-analyzed at build time, which means you can’t pass them as props from outside the component, or use the results of function calls, for example. The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. Can be a path relative to the source file, or an absolute URL. The StaticImage component can take all image options as props, as well as all shared props. Position of the image within its container. Resizing behavior for the image within its container. Inline styles applied to the outer wrapper. You should set this to "eager" for above-the-fold images to ensure they start loading before React hydration. The HTML element used for the outer wrapper. You may also use any valid tag props, which are forwarded to the underlying element. The following props can be passed to both GatsbyImage and StaticImage. These are props that can be passed to the components: Shared props If you would like to learn how to set up the image plugins and use these components on your site, see the how-to guide. Examples: Blog post hero image, author avatar
GatsbyImage: Use this if the image is passed into the component as a prop, or otherwise changes.Examples: site logo, index page hero image StaticImage: Use this if the image is the same every time the component is used.One is used for static and the other for dynamic images. The Gatsby Image plugin includes two components to display responsive images on your site. While most of these options are available regardless of where you source your images, be sure to refer to the documentation of your source plugin if you are using images from a CMS, as the exact options are likely to vary. This guide will show you how to configure your images, including choosing layouts, placeholders and image processing options.
0 kommentar(er)
