fix(gatsby-plugin-image): Pass sizes for source (#29192)

* this should fix sizes for source * update yarn lock * let users pass via props * optional chaining for the win * fix tests (cherry picked from commit 0ddbbfe)
gatsbyjs · Jan 27, 2021 · 23af522 · 23af522
1 parent 3c8c674
commit 23af522
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
@@ -332,6 +332,7 @@ icon.svg`,
         <picture>
           <source
             media="some-media"
+            sizes="192x192"
             srcset="icon32px.png 32w,icon64px.png 64w,icon-retina.png 2x,icon-ultra.png 3x,icon.svg"
           />
           <img

diff --git a/packages/gatsby-plugin-image/src/components/picture.tsx b/packages/gatsby-plugin-image/src/components/picture.tsx
@@ -66,14 +66,15 @@ const Image: FunctionComponent<ImageProps> = function Image({
 
 export const Picture = forwardRef<HTMLImageElement, PictureProps>(
   function Picture(
-    { fallback, sources = [], shouldLoad = true, sizes, ...props },
+    { fallback, sources = [], shouldLoad = true, ...props },
     ref
   ) {
+    const sizes = props.sizes || fallback?.sizes
     const fallbackImage = (
       <Image
-        sizes={sizes}
         {...props}
         {...fallback}
+        sizes={sizes}
         shouldLoad={shouldLoad}
         innerRef={ref}
       />