Handle blob urls in image component

[stefanprobst]

This PR resurrects #23622 which has not been updated in a while. Makes the Image component handle blob: object urls.

closes #23622
fixes #19291

credits: @sdn90

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes

[styfle]

Great work, thanks! 🎉

[ijjk]

Failing test suites

Commit: e81fcea

test/acceptance/ReactRefreshLogBox.dev.test.js

• server-side only compilation errors

Expand output

● server-side only compilation errors

ScriptTimeoutError: script timeout
  (Session info: headless chrome=92.0.4515.131)

  72 |
  73 |             // Wait for application to re-hydrate:
> 74 |             await browser.executeAsyncScript(function () {
     |             ^
  75 |               var callback = arguments[arguments.length - 1]
  76 |               if (window.__NEXT_HYDRATED) {
  77 |                 callback()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at Proxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.patch (acceptance/helpers.js:74:13)
  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:1422:3)

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
buildDuration	17.8s	17.8s	-30ms
buildDurationCached	4s	4s	-9ms
nodeModulesSize	49.1 MB	49.1 MB	⚠️ +84 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.295	3.283	-0.01
/ avg req/sec	758.75	761.61	+2.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.999	2.035	⚠️ +0.04
/error-in-render avg req/sec	1250.38	1228.54	⚠️ -21.84

Client Bundles (main, webpack, commons)

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.1 kB	23.1 kB	✓
webpack-HASH.js gzip	1.5 kB	1.5 kB	✓
Overall change	67 kB	67 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
_app-HASH.js gzip	980 B	980 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.64 kB	2.64 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	904 B	904 B	✓
image-HASH.js gzip	4.13 kB	4.13 kB	⚠️ +9 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	12.9 kB	12.9 kB	⚠️ +9 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
_buildManifest.js gzip	492 B	491 B	-1 B
Overall change	492 B	491 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-1cb3a46057c08067a973.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-1ce152c3d441f6919a04.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-fc139e2f5c78847cc149.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7a3c1e637e71f2a0e489.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -455,7 +455,7 @@
         var isLazy =
           !priority && (loading === "lazy" || typeof loading === "undefined");
 
-        if (src.startsWith("data:")) {
+        if (src.startsWith("data:") || src.startsWith("blob:")) {
           // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
           unoptimized = true;
           isLazy = false;

---

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
buildDuration	14.6s	14.4s	-101ms
buildDurationCached	5.6s	5.6s	⚠️ +17ms
nodeModulesSize	49.1 MB	49.1 MB	⚠️ +84 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.268	3.302	⚠️ +0.03
/ avg req/sec	764.91	757.04	⚠️ -7.87
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.987	2.03	⚠️ +0.04
/error-in-render avg req/sec	1257.9	1231.24	⚠️ -26.66

Client Bundles (main, webpack, commons)

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
17.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	14 kB	14 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.9 kB	67.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
_app-HASH.js gzip	965 B	965 B	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.83 kB	2.83 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.95 kB	2.95 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.8 kB	17.8 kB	✓

Client Build Manifests

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
_buildManifest.js gzip	498 B	498 B	✓
Overall change	498 B	498 B	✓

Rendered Page Sizes

	vercel/next.js canary	stefanprobst/next.js fix/blob-image-src	Change
index.html gzip	578 B	578 B	✓
link.html gzip	591 B	591 B	✓
withRouter.html gzip	570 B	570 B	✓
Overall change	1.74 kB	1.74 kB	✓

Commit: 6f9c3dd