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( )} )} + width={width} + height={height} className={imgClassName} {...getMainProps( isLoading,