diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index 810f939471d8e..0dad1518a7624 100644 --- 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 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,