gatsby-dynamic-image
A React component that given a Gatsby File
node will either
render a gatsby-image component or a native img
element. This is useful
for cases where you don't know whether or not an image has been processed by
gatsby-transformer-sharp (such as when iterating over a collection which
contains references to images of varying formats).
Usage
- Install the package from npm:
npm install --save gatsby-dynamic-image
- Import the component and use it in place of any existing gatsby-image instance or img element. The following example assumes a collection of Markdown documents processed with gatsby-transformer-remark and gatsby-remark-images containing image paths in frontmatter:
;; <ReactFragment> <h1>My images</h1> dataallMarkdownRemarkedges <Image node=data /> </ReactFragment>; const query = graphql` query { allMarkdownRemark { edges { node { frontmatter { image { publicURL childImageSharp { fluid(maxWidth: 980) { ...GatsbyImageSharpFluid } } } } } } } }`;