Fix duplicate image src causing canceled request

[styfle]

In PR #26968, we added Set of loaded images that was removed in #33474 erroneously.

We still need to track loaded images since we can't rely on img.complete, especially if the parent uses react-virtualized.

Tested on https://nextjs.org/showcase

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
buildDuration	12.3s	12.4s	⚠️ +130ms
buildDurationCached	3.1s	3.2s	⚠️ +38ms
nodeModulesSize	358 MB	358 MB	⚠️ +34 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.917	3.474	⚠️ +0.56
/ avg req/sec	857.01	719.55	⚠️ -137.46
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.379	1.342	-0.04
/error-in-render avg req/sec	1813.18	1862.73	+49.55

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71 kB	71 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.94 kB	4.93 kB	-8 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.4 kB	14.3 kB	-8 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
index.html gzip	530 B	530 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b1f110951983876f.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2477effd702d0bcc.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f0a2c3bb0706d8b2.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -225,6 +225,7 @@
         }
         return target;
       }
+      var loadedImageURLs = new Set();
       var allImgs = new Map();
       var perfObserver;
       var emptyDataURL =
@@ -439,6 +440,7 @@
               if (!imgRef.current) {
                 return;
               }
+              loadedImageURLs.add(src);
               if (placeholder === "blur") {
                 img.style.filter = "";
                 img.style.backgroundSize = "";
@@ -515,7 +517,6 @@
             "placeholder",
             "blurDataURL"
           ]);
-        var ref4;
         var imgRef = (0, _react).useRef(null);
         var rest = all;
         var layout = sizes ? "responsive" : "intrinsic";
@@ -560,12 +561,7 @@
           unoptimized = true;
           isLazy = false;
         }
-        if (
-          true &&
-          ((ref4 = imgRef.current) === null || ref4 === void 0
-            ? void 0
-            : ref4.complete)
-        ) {
+        if (true && loadedImageURLs.has(src)) {
           isLazy = false;
         }
         if (false) {

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
buildDuration	15.8s	16.1s	⚠️ +265ms
buildDurationCached	3.2s	3.2s	⚠️ +11ms
nodeModulesSize	358 MB	358 MB	⚠️ +34 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.898	2.903	0
/ avg req/sec	862.54	861.31	⚠️ -1.23
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.391	1.36	-0.03
/error-in-render avg req/sec	1797.73	1837.82	+40.09

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.3 kB	27.3 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.97 kB	4.97 kB	⚠️ +6 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.21 kB	2.21 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	⚠️ +6 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
_buildManifest.js gzip	459 B	458 B	-1 B
Overall change	459 B	458 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-duplicate-image-src	Change
index.html gzip	531 B	531 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b1f110951983876f.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2477effd702d0bcc.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f0a2c3bb0706d8b2.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -225,6 +225,7 @@
         }
         return target;
       }
+      var loadedImageURLs = new Set();
       var allImgs = new Map();
       var perfObserver;
       var emptyDataURL =
@@ -439,6 +440,7 @@
               if (!imgRef.current) {
                 return;
               }
+              loadedImageURLs.add(src);
               if (placeholder === "blur") {
                 img.style.filter = "";
                 img.style.backgroundSize = "";
@@ -515,7 +517,6 @@
             "placeholder",
             "blurDataURL"
           ]);
-        var ref4;
         var imgRef = (0, _react).useRef(null);
         var rest = all;
         var layout = sizes ? "responsive" : "intrinsic";
@@ -560,12 +561,7 @@
           unoptimized = true;
           isLazy = false;
         }
-        if (
-          true &&
-          ((ref4 = imgRef.current) === null || ref4 === void 0
-            ? void 0
-            : ref4.complete)
-        ) {
+        if (true && loadedImageURLs.has(src)) {
           isLazy = false;
         }
         if (false) {

Commit: d931103