Image not displaying as called gatsby

footer.js

import React from 'react';
import signature from '../assets/signature.png'; // import signature
import { rhythm } from '../utils/typography';

console.log(logo);

class Footer extends React.Component {
  render() {
    return (
      <footer
        style={{
          marginTop: rhythm(2.5),
          paddingTop: rhythm(1),
        }}
      >
        <div style={{ float: 'right' }} />
        <a
          href="https://facebook.com/shodipo.ayomide"
          target="_blank"
          rel="noopener noreferrer"
        >
          facebook
        </a>{' '}
        &bull;{' '}
        <a
          href="https://twitter.com/developerayo"
          target="_blank"
          rel="noopener noreferrer"
        >
          twitter
        </a>{' '}
        &bull;{' '}
        <a
          href="https://github.com/developerayo"
          target="_blank"
          rel="noopener noreferrer"
        >
          github
        </a>
        <div style={{ float: 'right' }}>&copy; Copyright 2019</div>
        <div>
            <img src={signature} alt="signature" className="signature" />
          </div>
                   
      </footer>        
    );       
  }
}

export default Footer;