gatsby-plugin-sharp "height has to be a positive int larger than zero (> 0), now it's 0"

[ThomasVandenhede]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hello everyone,

First off, I'd like to start by thanking everyone involved with the project. It's been a pleasure using Gatsby on our website for the past 3 years.

I have run into what I believe to be an edge case with the gatsby-plugin-sharp plugin, where images much wider than high (1300x10px in my case) can cause issues when they are combined with the placeholder: BLURRED parameter like so:

export const query = graphql`
  query {
    allFile {
      nodes {
        publicURL
        childImageSharp {
          gatsbyImageData(
            layout: FIXED
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  }
`;

Running npm run build leads to this error message:

ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

height has to be a positive int larger than zero (> 0), now it's 0

   1 | query pageUsersthomasWorkgatsbyTestProjectsrcpagesindexJs3516172285 {
   2 |   allFile {
   3 |     nodes {
   4 |       publicURL
   5 |       childImageSharp {
>  6 |         gatsbyImageData(
     |         ^
   7 |           layout: FIXED
   8 |           placeholder: BLURRED
   9 |           formats: [AUTO, WEBP, AVIF]
  10 |         )
  11 |       }
  12 |     }
  13 |   }
  14 | }
  15 |

Reproduction Link

https://github.com/ThomasVandenhede/gatsby-test-project

Steps to Reproduce

1. npm i && npm run build
2. You should see the build process fail and the error message:

   Error: height has to be a positive int larger than zero (> 0), now it's 0
   

Important parameters needed to reproduce this issue are:

• processing images through gatsby-plugin-sharp
• keeping "blurredOptions" to their default value (changing the height / width field could theoretically prevent the issue)
• querying an image whose aspect ratio is at least > 20:1
• using BLURRED placeholders

Expected Result

The build process should not crash even when unusually wide images are processed through gatsby-plugin-sharp.
The blurred version of the images should be at least 20x1 pixels.

Actual Result

Right now, images whose aspect ratio is more than 20:1 can lead to issues, especially when the blurredOptions option has not been provided, since the default width for blurred base64 images is 20px.

gatsby/packages/gatsby-plugin-sharp/src/image-data.ts

Line 16 in 392d6bc

const DEFAULT_BLURRED_IMAGE_WIDTH = 20

For such images, base64 blurred images should be at least 1px high to prevent the build process from failing.

Environment

System:
    OS: macOS 12.2.1
    CPU: (10) x64 Apple M1 Pro
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
    npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 102.0.5005.61
    Safari: 15.3
  npmPackages:
    gatsby: ^4.16.0 => 4.16.0
    gatsby-plugin-image: ^2.16.1 => 2.16.1
    gatsby-plugin-sharp: ^4.16.1 => 4.16.1
    gatsby-source-filesystem: ^4.16.0 => 4.16.0
    gatsby-transformer-sharp: ^4.16.0 => 4.16.0

Config Flags

No response

[ThomasVandenhede]

I have tried changing this line:

gatsby/packages/gatsby-plugin-sharp/src/image-data.ts

Line 344 in 392d6bc

height: Math.round(placeholderWidth / imageSizes.aspectRatio),

to

height: Math.max(1, Math.round(placeholderWidth / imageSizes.aspectRatio)),

and that solved the issue.

Please let me know if you'd like me to open a PR. I'd be happy to submit a fix!