fix(gatsby-plugin-image): Handle placeholder in plugin toolkit (#30141)…

… (#30170) * fix(gatsby-plugin-image): Handle placeholder in plugin toolkit * Add test (cherry picked from commit f851312) Co-authored-by: Matt Kane <matt@gatsbyjs.com>
gatsbyjs · Mar 10, 2021 · 4c44125 · 4c44125
1 parent 4fd16c5
commit 4c44125
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts
@@ -225,6 +225,16 @@ https://example.com/afile.jpg/1920/1440/image.webp 1920w`)
     expect(data.images?.fallback).toBeUndefined()
   })
 
+  it(`includes a placeholder image if a URL is provided`, () => {
+    const data = generateImageData({
+      ...args,
+      placeholderURL: `data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD`,
+    })
+    expect(data.placeholder?.fallback).toEqual(
+      `data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD`
+    )
+  })
+
   it(`generates the same output as the input format if output is auto`, () => {
     const sourceMetadata = {
       width: 800,

diff --git a/packages/gatsby-plugin-image/src/image-utils.ts b/packages/gatsby-plugin-image/src/image-utils.ts
@@ -98,9 +98,7 @@ export interface IGatsbyImageHelperArgs {
   layout?: Layout
   formats?: Array<ImageFormat>
   filename: string
-  placeholderURL?:
-    | ((args: IGatsbyImageHelperArgs) => string | undefined)
-    | string
+  placeholderURL?: string
   width?: number
   height?: number
   sizes?: string
@@ -238,6 +236,7 @@ export function generateImageData(
     filename,
     reporter = { warn },
     backgroundColor,
+    placeholderURL,
   } = args
 
   if (!pluginName) {
@@ -342,6 +341,11 @@ export function generateImageData(
     layout,
     backgroundColor,
   }
+
+  if (placeholderURL) {
+    imageProps.placeholder = { fallback: placeholderURL }
+  }
+
   switch (layout) {
     case `fixed`:
       imageProps.width = imageSizes.presentationWidth