diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 5cbb09e7a72c8..8621fbfe83fb6 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -262,14 +262,12 @@ const noscriptImg = props => { // Earlier versions of gatsby-image during the 2.x cycle did not wrap // the `Img` component in a `picture` element. This maintains compatibility // until a breaking change can be introduced in the next major release -const Placeholder = ({ - src, - imageVariants, - generateSources, - spreadProps, - ariaHidden, -}) => { - const baseImage = +const Placeholder = React.forwardRef((props, ref) => { + const { src, imageVariants, generateSources, spreadProps, ariaHidden } = props + + const baseImage = ( + + ) return imageVariants.length > 1 ? ( @@ -279,7 +277,7 @@ const Placeholder = ({ ) : ( baseImage ) -} +}) const Img = React.forwardRef((props, ref) => { const { @@ -357,6 +355,7 @@ class Image extends React.Component { } this.imageRef = React.createRef() + this.placeholderRef = props.placeholderRef || React.createRef() this.handleImageLoaded = this.handleImageLoaded.bind(this) this.handleRef = this.handleRef.bind(this) } @@ -517,6 +516,7 @@ class Image extends React.Component { {image.base64 && ( + import(`object-fit-images`).then(({ default: ObjectFitImages }) => { ObjectFitImages(this.imageRef.current.imageRef.current) - ) + ObjectFitImages(this.placeholderRef.current) + }) } } render() { const { objectFit, objectPosition, ...props } = this.props + const polyfillStyle = { + objectFit: objectFit, + objectPosition: objectPosition, + fontFamily: `"object-fit: ${objectFit}; object-position: ${objectPosition}"`, + } + return ( )