fix: Data URL images with 'fill' are always triggering 'missing sizes…

…' warning (#42030)

fixes #42006

this issue occurred because images with `data url` src start with `blob`
and `data` will be mark as `unoptimized`, then its `sizes` will be
assigned with `undefined`.

I just skip the check for `data url` images, if there is any better
solution, we can have a discuss here.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added

- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: Steven <steven@ceriously.com>

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
               )
             }
           },
@@ -418,6 +420,7 @@ const ImageElement = ({
             onLoadingCompleteRef,
             setBlurComplete,
             onError,
+            unoptimized,
           ]
         )}
         onLoad={(event) => {
@@ -428,7 +431,8 @@ const ImageElement = ({
             placeholder,
             onLoadRef,
             onLoadingCompleteRef,
-            setBlurComplete
+            setBlurComplete,
+            unoptimized
           )
         }}
         onError={(event) => {

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>
+  )
+}

test/integration/next-image-new/default/test/index.test.ts

@@ -861,6 +861,17 @@ function runTests(mode) {
       )
     })
 
+    it('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.toMatch(
+        /Image with src (.*) has "fill" but is missing "sizes" prop. Please add it to improve page performance/gm
+      )
+    })
+
     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()`)