fix: if an image is unoptimized, should not warning for required size…

…s when using fill prop(vercel#42006).
teobler · Oct 28, 2022 · 7b0b300 · 7b0b300
1 parent 70e7e58
commit 7b0b300
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -245,7 +245,8 @@ function handleLoading(
   placeholder: PlaceholderValue,
   onLoadRef: React.MutableRefObject<OnLoad | undefined>,
   onLoadingCompleteRef: React.MutableRefObject<OnLoadingComplete | undefined>,
-  setBlurComplete: (b: boolean) => void
+  setBlurComplete: (b: boolean) => void,
+  unoptimized: boolean
 ) {
   if (!img || img['data-loaded-src'] === src) {
     return
@@ -296,8 +297,8 @@ function handleLoading(
     if (process.env.NODE_ENV !== 'production') {
       if (img.getAttribute('data-nimg') === 'fill') {
         if (
-          !img.getAttribute('sizes') ||
-          img.getAttribute('sizes') === '100vw'
+          !unoptimized &&
+          (!img.getAttribute('sizes') || img.getAttribute('sizes') === '100vw')
         ) {
           let widthViewportRatio =
             img.getBoundingClientRect().width / window.innerWidth
@@ -407,7 +408,8 @@ const ImageElement = ({
                 placeholder,
                 onLoadRef,
                 onLoadingCompleteRef,
-                setBlurComplete
+                setBlurComplete,
+                unoptimized
               )
             }
           },
@@ -428,7 +430,8 @@ const ImageElement = ({
             placeholder,
             onLoadRef,
             onLoadingCompleteRef,
-            setBlurComplete
+            setBlurComplete,
+            unoptimized
           )
         }}
         onError={(event) => {

diff --git a/test/integration/next-image-new/default/pages/data-url-with-fill-and-sizes.js b/test/integration/next-image-new/default/pages/data-url-with-fill-and-sizes.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div style={{ position: 'absolute', width: '200px', height: '200px' }}>
+      <p>Data Url With Fill And Sizes</p>
+      <Image
+        src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' %3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%' width='100%' preserveAspectRatio='none' href='data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAL/xAAeEAABBAIDAQAAAAAAAAAAAAACAAEDBAUhBhRRsf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/xAAWEQEBAQAAAAAAAAAAAAAAAAABAgD/2gAMAwEAAhEDEQA/ALPk+UoW6g46eca0oGFouu7NoNE3m/iIiZEmLbv/2Q=='/%3E%3C/svg%3E"
+        alt="test"
+        fill
+        sizes="200px"
+      />
+    </div>
+  )
+}
diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
@@ -861,6 +861,17 @@ function runTests(mode) {
       )
     })
 
+    it.only('should not warn when data url image with fill and sizes props', async () => {
+      const browser = await webdriver(appPort, '/data-url-with-fill-and-sizes')
+      const warnings = (await browser.log())
+        .map((log) => log.message)
+        .join('\n')
+      expect(await hasRedbox(browser)).toBe(false)
+      expect(warnings).not.toContain(
+        `Image with src \"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' %3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%' width='100%' preserveAspectRatio='none' href='data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAL/xAAeEAABBAIDAQAAAAAAAAAAAAACAAEDBAUhBhRRsf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/xAAWEQEBAQAAAAAAAAAAAAAAAAABAgD/2gAMAwEAAhEDEQA/ALPk+UoW6g46eca0oGFouu7NoNE3m/iIiZEmLbv/2Q=='/%3E%3C/svg%3E\" has \"fill\" but is missing \"sizes\" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes`
+      )
+    })
+
     it('should not warn when svg, even if with loader prop or without', async () => {
       const browser = await webdriver(appPort, '/loader-svg')
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)