diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index f53be503d6d0..60f36c27a074 100644 --- 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 index 27c0fe8da07f..eeee0b5bb24c 100644 --- 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 (
@@ -16,6 +18,23 @@ const Page = () => { >
+
+ +
) } diff --git a/test/integration/image-future/default/test/index.test.ts b/test/integration/image-future/default/test/index.test.ts index d10c94adec38..48d111655eac 100644 --- 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')