Add url-loader for images in components directory

[jakubrohleder]

This PR adds support for using images in components with require/import syntax. It allows to write reusable components that doesn't have to use any file from pages directory.

E.g.

Component file structure:

components/
  Logo/
    logo.png
    Logo.js

Logo.js

import React from 'react'
import img from './logo.png'

export default function Logo () {
  return (
    <img src={img} alt="Our awesome logo" />
  )
}

In my opinion, im the feature all images should be passed through webpack loader, at least to rewrite names (for better caching). It would also make it possible to resize/compress those files during build stage.

[KyleAMathews]

I think this is a nice compromise solution until #208 is fixed which would let us turn on image loaders for both the component directory + the pages directory.

@gatsbyjs/gatsby-core-maintainers any thoughts?

[KyleAMathews]

Actually after thinking about this more... I don't think I'll accept this. The real problem right now is the require.context that requires all files inside /pages/ which is why images have a null-loader right now. The right solution is to whitelist file types to become pages as then you could have an image loader that works for files inside and outside /pages/. This PR is a bit odd in that it only enables image loading for one special-named directory that doesn't have any other significance within Gatsby.

So thanks for the PR and hope you'll be back to contribute more in the future but for now, just modify your Webpack config yourself in gatsby.node.js https://github.com/gatsbyjs/gatsby#how-to-use-your-own-webpack-loaders