From 1ea65cf931fbc5342855c74c0ee8543dc2083af4 Mon Sep 17 00:00:00 2001
From: Alex <alxmorais8@msn.com>
Date: Fri, 16 Sep 2022 22:17:19 +0200
Subject: [PATCH] fix(image): handle image imports with high aspect ratio
 (#40563)

## Bug

- [x] Related issues linked using `fixes #40562`
fixes #40562
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
---
 .../webpack/loaders/next-image-loader.js      |  10 ++++++----
 .../image-future/default/pages/static-img.js  |  18 ++++++++++++++++++
 .../default/public/super-wide.png             | Bin 0 -> 446 bytes
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 test/integration/image-future/default/public/super-wide.png

diff --git a/packages/next/build/webpack/loaders/next-image-loader.js b/packages/next/build/webpack/loaders/next-image-loader.js
index 6bc17aa92ebfddd..a336090874db9a9 100644
--- a/packages/next/build/webpack/loaders/next-image-loader.js
+++ b/packages/next/build/webpack/loaders/next-image-loader.js
@@ -35,12 +35,14 @@ function nextImageLoader(content) {
       // Shrink the image's largest dimension
       if (imageSize.width >= imageSize.height) {
         blurWidth = BLUR_IMG_SIZE
-        blurHeight = Math.round(
-          (imageSize.height / imageSize.width) * BLUR_IMG_SIZE
+        blurHeight = Math.max(
+          Math.round((imageSize.height / imageSize.width) * BLUR_IMG_SIZE),
+          1
         )
       } else {
-        blurWidth = Math.round(
-          (imageSize.width / imageSize.height) * BLUR_IMG_SIZE
+        blurWidth = Math.max(
+          Math.round((imageSize.width / imageSize.height) * BLUR_IMG_SIZE),
+          1
         )
         blurHeight = BLUR_IMG_SIZE
       }
diff --git a/test/integration/image-future/default/pages/static-img.js b/test/integration/image-future/default/pages/static-img.js
index 26c2e5a55fbc575..f4c4552f2d7db5b 100644
--- a/test/integration/image-future/default/pages/static-img.js
+++ b/test/integration/image-future/default/pages/static-img.js
@@ -11,6 +11,8 @@ import testGIF from '../public/test.gif'
 import testBMP from '../public/test.bmp'
 import testICO from '../public/test.ico'
 import widePNG from '../public/wide.png'
+import tallPNG from '../components/tall.png'
+import superWidePNG from '../public/super-wide.png'
 
 import TallImage from '../components/TallImage'
 
@@ -40,6 +42,22 @@ const Page = () => {
       <Image id="blur-jpg" src={testJPG} placeholder="blur" />
       <Image id="blur-webp" src={testWEBP} placeholder="blur" />
       <Image id="blur-avif" src={testAVIF} placeholder="blur" />
+      <Image id="blur-wide" src={widePNG} placeholder="blur" />
+      <Image id="blur-tall" src={tallPNG} placeholder="blur" />
+      <Image
+        id="blur-super-wide"
+        src={superWidePNG}
+        placeholder="blur"
+        width={72}
+        height={16}
+      />
+      <Image
+        id="blur-super-tall"
+        src={superWidePNG}
+        placeholder="blur"
+        width={16}
+        height={72}
+      />
       <br />
       <Image id="static-svg" src={testSVG} />
       <Image id="static-gif" src={testGIF} />
diff --git a/test/integration/image-future/default/public/super-wide.png b/test/integration/image-future/default/public/super-wide.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bae369b47c0c5ba14a9853a16e980ebb604b942
GIT binary patch
literal 446
zcmeAS@N?(olHy`uVBq!ia0y~yU~d4jB{|rD<b@pL!$69q*vT`50|;t3QaV7AC9V-A
z!TD(=<%vb94C#6Kxv9Fv$wjHDdBqv|CGVN{+W{5ngA_Rzr6!hS=I1GdWag$aq!sBY
z7@FxR6sH#GDHs_T87XAv07Z=SOpO$@4U7y7*e4!)#K6EP>gnPbQZeW4O-J4X1_B2*
ztYhf2zukLe$*PIH3jb}4KkEUF2Z43l{n;Tbh7bJA5)h`sAqJ4sfuO^nff2$|;z@uo
c8aRfmGP^k|8KWb<J_mcr)78&qol`;+0O7+@pa1{>

literal 0
HcmV?d00001