Fix next/future/image incorrectly warning for fill + blur (#39986)

This warning was incorrectly printed when `fill` and `placeholder="blur"` were used together: > Image with src "/test.jpg" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.
vercel · Aug 26, 2022 · 6a65dc5 · 6a65dc5
1 parent c6dafda
commit 6a65dc5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
@@ -697,7 +697,7 @@ export default function Image({
     }
 
     if (placeholder === 'blur') {
-      if ((widthInt || 0) * (heightInt || 0) < 1600) {
+      if (widthInt && heightInt && widthInt * heightInt < 1600) {
         warnOnce(
           `Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`
         )

diff --git a/test/integration/image-future/default/pages/fill.js b/test/integration/image-future/default/pages/fill.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import Image from 'next/future/image'
 
+import test from '../public/test.jpg'
+
 const Page = () => {
   return (
     <div>
@@ -16,6 +18,23 @@ const Page = () => {
       >
         <Image id="fill-image-1" src="/wide.png" sizes="300px" fill />
       </div>
+      <div
+        id="image-container-blur"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image
+          id="fill-image-blur"
+          src={test}
+          sizes="300px"
+          placeholder="blur"
+          fill
+        />
+      </div>
     </div>
   )
 }

diff --git a/test/integration/image-future/default/test/index.test.ts b/test/integration/image-future/default/test/index.test.ts
@@ -1032,6 +1032,9 @@ function runTests(mode) {
           .map((log) => log.message)
           .join('\n')
         expect(warnings).not.toMatch(/Image with src (.*) has "fill"/gm)
+        expect(warnings).not.toMatch(
+          /Image with src (.*) is smaller than 40x40. Consider removing(.*)/gm
+        )
       })
       it('should log warnings when using fill mode incorrectly', async () => {
         browser = await webdriver(appPort, '/fill-warnings')