feat(gatsby-image): add itemProp prop (#11296)

Author: patrickcameron

packages/gatsby-image/index.d.ts

@@ -40,6 +40,7 @@ interface GatsbyImageProps {
   onStartLoad?: (param: { wasCached: boolean }) => void
   onError?: (event: any) => void
   Tag?: string
+  itemProp?: string
 }
 
 export default class GatsbyImage extends React.Component<

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -28,6 +28,7 @@ exports[`<Img /> should render fixed size images 1`] = `
       <img
         alt="Alt text for the image"
         height="100"
+        itemprop="item-prop-for-the-image"
         src="test_image.jpg"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
         title="Title for the image"
@@ -73,6 +74,7 @@ exports[`<Img /> should render fluid images 1`] = `
       />
       <img
         alt="Alt text for the image"
+        itemprop="item-prop-for-the-image"
         src="test_image.jpg"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
         title="Title for the image"

packages/gatsby-image/src/__tests__/index.js

@@ -35,6 +35,7 @@ const setup = (fluid = false, onLoad = () => {}, onError = () => {}) => {
       {...!fluid && { fixed: fixedShapeMock }}
       onLoad={onLoad}
       onError={onError}
+      itemProp={`item-prop-for-the-image`}
       placeholderStyle={{ color: `red` }}
       placeholderClassName={`placeholder`}
     />

packages/gatsby-image/src/index.js

@@ -227,6 +227,7 @@ class Image extends React.Component {
       fixed,
       backgroundColor,
       Tag,
+      itemProp,
     } = convertProps(this.props)
 
     const bgColor =
@@ -323,6 +324,7 @@ class Image extends React.Component {
                 ref={this.imageRef}
                 onLoad={this.handleImageLoaded}
                 onError={this.props.onError}
+                itemProp={itemProp}
               />
             </picture>
           )}
@@ -408,6 +410,7 @@ class Image extends React.Component {
                 ref={this.imageRef}
                 onLoad={this.handleImageLoaded}
                 onError={this.props.onError}
+                itemProp={itemProp}
               />
             </picture>
           )}
@@ -482,6 +485,7 @@ Image.propTypes = {
   onError: PropTypes.func,
   onStartLoad: PropTypes.func,
   Tag: PropTypes.string,
+  itemProp: PropTypes.string,
 }
 
 export default Image