gatsby-image: Add the ability to have className on actual img element

Summary

I have a requirement to add className to the actual <img> element to support microformats.

Currently GatsbyJs only has

• ClassName - on the wrapper only
• placeholderClassName - on the placeholder <img>

There is no support for the actual <img> element.

Basic example

<Img
  fluid={data['profilePic'].childImageSharp.fluid}
  alt={`Ben Shi`}
  className={'avatar'}
  imgClassName={'u-photo'}
/>

Motivation

In microformats u-photo is only valid on (<img src>) elements. gatsby-image both fixed and fluid does not support this. http://microformats.org/wiki/microformats-2-implied-properties

[isaac-martin]

We would like to be able to pass down the css generated by emotion to the img element and it is currently not possible with the current gatsby image component. Any update - to me it looks like the change suggested in #24161 would solve this?

[steffik02]

Just thought I’d add that I need this functionality as well, or the ability to pass data attributes to the tag. I’m trying to add an attribute to prevent pinning to Pinterest with certain images and I can’t get the attribute on the actual img tag. If I could at least get a class name on there, then I could add the attribute with Javascript.