A React component wrapping gatsby-image to handle mixed image formats
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
package-lock.json
package.json

README.md

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
                }
              }
            }
          }
        }
      }
    }
  }
`;