fix(gatsby-plugin-sharp): Ensure min 1px height for BLURRED placeho…

…lder (#35914) Co-authored-by: Lennart <lekoarts@gmail.com>
gatsbyjs · Jul 26, 2022 · abad94f · abad94f
1 parent ae5adb4
commit abad94f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/packages/gatsby-plugin-sharp/src/__tests__/images/wide-aspect-ratio.png b/packages/gatsby-plugin-sharp/src/__tests__/images/wide-aspect-ratio.png
diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js
@@ -549,6 +549,20 @@ describe(`gatsby-plugin-sharp`, () => {
         }
       `)
     })
+
+    it(`handles really wide aspect ratios for blurred placeholder`, async () => {
+      const result = await base64({
+        file: getFileObject(
+          path.join(__dirname, `images/wide-aspect-ratio.png`),
+          `wide-aspect-ratio`,
+          `1000x10`
+        ),
+        args,
+      })
+
+      expect(result.width).toEqual(20)
+      expect(result.height).toEqual(1)
+    })
   })
 
   describe(`tracedSVG`, () => {

diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -375,7 +375,10 @@ export async function generateImageData({
         ...options,
         toFormatBase64: args.blurredOptions?.toFormat,
         width: placeholderWidth,
-        height: Math.round(placeholderWidth / imageSizes.aspectRatio),
+        height: Math.max(
+          1,
+          Math.round(placeholderWidth / imageSizes.aspectRatio)
+        ),
       },
       reporter,
     })