Gatsby Dynamic Image

image.js

import React from 'react'
import PropTypes from 'prop-types'
import Img from 'gatsby-image'

const Image = ({ node, alt, className }) => {
  if (node.childImageSharp && node.childImageSharp.fluid) {
    return (
      <Img fluid={node.childImageSharp.fluid} alt={alt} className={className} />
    )
  }

  if (node.childImageSharp && node.childImageSharp.fixed) {
    return (
      <Img fixed={node.childImageSharp.fixed} alt={alt} className={className} />
    )
  }

  return node.publicURL ? (
    <img src={node.publicURL} alt={alt} className={className} />
  ) : null
}

Image.propTypes = {
  node: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
  alt: PropTypes.string,
  className: PropTypes.string,
}

Image.defaultProps = {
  alt: '',
}

export default Image