fix(next/image): do not pass-through srcSrc on lazy image (#20651)

This PR fixes a bug where we'd accidentally pass-through the user-provided `srcSet` if the image was lazy, just to then replace it when we hydrate.

---

Fixes #19041

packages/next/client/image.tsx

@@ -130,10 +130,11 @@ type GenImgAttrsData = {
   sizes?: string
 }
 
-type GenImgAttrsResult = Pick<
-  JSX.IntrinsicElements['img'],
-  'src' | 'sizes' | 'srcSet'
->
+type GenImgAttrsResult = {
+  src: string
+  srcSet: string | undefined
+  sizes: string | undefined
+}
 
 function generateImgAttrs({
   src,
@@ -144,7 +145,7 @@ function generateImgAttrs({
   sizes,
 }: GenImgAttrsData): GenImgAttrsResult {
   if (unoptimized) {
-    return { src }
+    return { src, srcSet: undefined, sizes: undefined }
   }
 
   const { widths, kind } = getWidths(width, layout)
@@ -364,6 +365,8 @@ export default function Image({
   let imgAttributes: GenImgAttrsResult = {
     src:
       'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+    srcSet: undefined,
+    sizes: undefined,
   }
 
   if (isVisible) {

test/integration/image-component/default/pages/drop-srcset.js

+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Drop srcSet prop (cannot be manually provided)</p>
+      <Image
+        src="/moving-truck.jpg"
+        width={300}
+        height={100}
+        srcSet="/moving-truck-mobile.jpg 375w,
+            /moving-truck-mobile.jpg 640w,
+            /moving-truck.jpg"
+        sizes="(max-width: 375px) 375px, 100%"
+      />
+      <p>Assign sizes prop</p>
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/default/test/index.test.js

 /* eslint-env jest */
 
+import cheerio from 'cheerio'
 import fs from 'fs-extra'
 import {
   check,
@@ -10,6 +11,7 @@ import {
   launchApp,
   nextBuild,
   nextStart,
+  renderViaHTTP,
   waitFor,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
@@ -154,6 +156,19 @@ function runTests(mode) {
     }
   })
 
+  it('should not pass through user-provided srcset (causing a flash)', async () => {
+    const html = await renderViaHTTP(appPort, '/drop-srcset')
+    const $html = cheerio.load(html)
+
+    const els = [].slice.apply($html('img'))
+    expect(els.length).toBe(1)
+
+    const [el] = els
+    expect(el.attribs.src).toBeDefined()
+    expect(el.attribs.srcset).toBeUndefined()
+    expect(el.attribs.srcSet).toBeUndefined()
+  })
+
   it('should update the image on src change', async () => {
     let browser
     try {