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

(cherry picked from commit 9db36db) Co-authored-by: Matt Kane <matt@gatsbyjs.com>

Author: GatsbyJS Bot

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

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,