Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in next/image with high aspect ratio images #40602

Closed
1 task done
jlabedo opened this issue Sep 16, 2022 · 3 comments
Closed
1 task done

Error in next/image with high aspect ratio images #40602

jlabedo opened this issue Sep 16, 2022 · 3 comments
Labels
bug Issue was opened via the bug report template.

Comments

@jlabedo
Copy link

jlabedo commented Sep 16, 2022

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101
Binaries:
  Node: 18.3.0
  npm: 8.11.0
  Yarn: 3.1.1
  pnpm: 7.5.0
Relevant packages:
  next: 12.3.0
  eslint-config-next: 12.3.0
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

With high aspect ratio images and small height, we can get an error during build while optimising the image:

Error: Expected positive integer for height but received 0 of type number
    at Object.invalidParameterError (/app/node_modules/sharp/lib/is.js:124:10)
    at Sharp.resize (/app/node_modules/sharp/lib/resize.js:251:16)
    at Object.resizeImage (/app/node_modules/next/dist/server/image-optimizer.js:623:21)
    at /app/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:63:98
    at Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:79:26)
    at /app/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:63:60
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)

In my case it is a 184x8 px image.

Expected Behavior

No error during build.

This is because the shrinked image height for bluring is rounded to 0:

blurHeight = Math.round(
(imageSize.height / imageSize.width) * BLUR_IMG_SIZE
)

Could be fixed with:

blurHeight = Math.max(1, Math.round(
     (imageSize.height / imageSize.width) * BLUR_IMG_SIZE
))

Same for the width on next lines.

Link to reproduction

irrelevant

To Reproduce

import a static image with high aspect ratio and low height. The build will fail

@jlabedo jlabedo added the bug Issue was opened via the bug report template. label Sep 16, 2022
@SukkaW
Copy link
Contributor

SukkaW commented Sep 16, 2022

Duplicated with #40562 and should be fixed by #40563.

@balazsorban44
Copy link
Member

Closing, as pointed out, this is a duplicate of #40562

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

3 participants