gatsby-dynamic-image

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:

import Image from 'gatsby-dynamic-image';
import React from 'react';

export default ({ data }) => (
  <React.Fragment>
    <h1>My images</h1>
    {data.allMarkdownRemark.edges.map(node => (
      <Image node={node.frontmatter.image} />
    ))}
    <Image node={data} />
  </React.Fragment>
);

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            image {
              publicURL
              childImageSharp {
                fluid(maxWidth: 980) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`;