From 9183a6bcef7126b040a66f08c3663b406ddc4e69 Mon Sep 17 00:00:00 2001
From: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>
Date: Tue, 23 Feb 2021 04:38:16 -0500
Subject: [PATCH] fix(gatsby-plugin-image): Apply inline styles and img size
 (#29603) (#29668)

(cherry picked from commit 9db36dbe165c35105cef4ad95f4802061ff5fcc5)

Co-authored-by: Matt Kane <matt@gatsbyjs.com>
---
 packages/gatsby-plugin-image/src/components/hooks.ts        | 6 ++++++
 .../gatsby-plugin-image/src/components/lazy-hydrate.tsx     | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
index 276acd94daa46..70a204f3f2e11 100644
--- a/packages/gatsby-plugin-image/src/components/hooks.ts
+++ b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -60,6 +60,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
index 3cff538bc7c88..65e232291e8f7 100644
--- 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,