Allow custom props to Gatsby-Image component

Summary

Custom props should be allowed to be passed to the root tag of a Gatsby Image component.

Basic example

import Image from 'gatsby-image'

<Image customProp={1} />
<Image {...customProps} />

In this example, customProp and customProps should be passed to the root element of the Image component.

Motivation

I’m sure there are several use cases where custom props would be useful. A good example is for flip animations. React-flip-toolkit, requires custom props to be passed to the root element of a React component. Without the ability to pass custom props, flip animations are not possible.

[wardpeet]

Thank you for opening this issue.

Gatsby-image was created so people can have an easy way to setup images from Gatsby. If we enable custom props, this could lead to bad a11y, weird bugs and more. For these reasons, I’ll close this PR. We hope to have a better gatsby-image component in the near future that can be used more granular and fixes your issue.

[ooloth]

@polarathene Thanks!

Passing props/attributes to a wrapper element is a workable solution for now (I didn’t realize how complicated the pass-through request would turn out to be).

It would be awkward as a permanent approach, but @wardpeet mentioned there’s a broader solution in the works, so I’m looking forward to that.