fix(gatsby-plugin-image): Correct image styles (#28834) (#28854)

* fix(gatsby-plugin-image): Correct image styles * Remove avif options from dom * Remove in/delete (cherry picked from commit 3d6446c) Co-authored-by: Matt Kane <matt@gatsbyjs.com>
gatsbyjs · Jan 5, 2021 · b648728 · b648728
1 parent f45ba68
commit b648728
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -27,6 +27,7 @@ export interface GatsbyImageProps
   alt: string
   as?: ElementType
   className?: string
+  class?: string
   imgClassName?: string
   image: IGatsbyImageData
   imgStyle?: CSSProperties
@@ -56,6 +57,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
   as: Type = `div`,
   style,
   className,
+  class: preactClass,
   onStartLoad,
   image,
   onLoad: customOnLoad,
@@ -68,6 +70,9 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     }
     return null
   }
+  if (preactClass) {
+    className = preactClass
+  }
   const { width, height, layout, images } = image
 
   const root = useRef<HTMLElement>()

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -18,6 +18,7 @@ export const GatsbyImageHydrator: FunctionComponent<{
 export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyImage({
   as,
   className,
+  class: preactClass,
   style,
   image,
   loading = `lazy`,
@@ -32,6 +33,15 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     console.warn(`[gatsby-plugin-image] Missing image prop`)
     return null
   }
+  if (preactClass) {
+    className = preactClass
+  }
+  imgStyle = {
+    objectFit,
+    objectPosition,
+    backgroundColor,
+    ...imgStyle,
+  }
 
   const {
     width,
@@ -97,6 +107,8 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
         <MainImage
           data-gatsby-image-ssr=""
           sizes={sizes}
+          className={imgClassName}
+          style={imgStyle}
           {...(props as Omit<MainImageProps, "images" | "fallback">)}
           // When eager is set we want to start the isLoading state on true (we want to load the img without react)
           {...getMainProps(loading === `eager`, false, cleanedImages, loading)}

diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
@@ -53,6 +53,7 @@ export function _getStaticImage(
     jpgOptions,
     pngOptions,
     webpOptions,
+    avifOptions,
     blurredOptions,
     /* eslint-enable @typescript-eslint/no-unused-vars */
     ...props