fix(gatsby-plugin-image): Apply inline styles and img size (#29603)

gatsbyjs · Feb 19, 2021 · 9db36db · 9db36db
1 parent 6bee561
commit 9db36db
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -62,6 +62,12 @@ export function getWrapperProps(
 
   let className = `gatsby-image-wrapper`
 
+  // If the plugin isn't installed we need to apply the styles inline
+  if (!global.GATSBY___IMAGE) {
+    wrapperStyle.position = `relative`
+    wrapperStyle.overflow = `hidden`
+  }
+
   if (layout === `fixed`) {
     wrapperStyle.width = width
     wrapperStyle.height = height

diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
@@ -84,6 +84,8 @@ export function lazyHydrate(
       )}
       <MainImage
         {...(props as Omit<MainImageProps, "images" | "fallback">)}
+        width={width}
+        height={height}
         className={imgClassName}
         {...getMainProps(
           isLoading,