
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.
FLUID IMAGE GATSBY 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
FLUID IMAGE GATSBY HOW TO
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

