Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle blob urls in image component #27975

Merged
merged 6 commits into from Aug 13, 2021

Conversation

stefanprobst
Copy link
Contributor

@stefanprobst stefanprobst commented Aug 11, 2021

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

@ijjk

This comment has been minimized.

packages/next/client/image.tsx Outdated Show resolved Hide resolved
@ijjk

This comment has been minimized.

styfle
styfle approved these changes Aug 13, 2021
Copy link
Member

@styfle styfle left a comment

Great work, thanks! 🎉

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Aug 13, 2021

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
Copy link
Member

ijjk commented Aug 13, 2021

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

@kodiakhq kodiakhq bot merged commit daadfd3 into vercel:canary Aug 13, 2021
30 checks passed
@stefanprobst stefanprobst deleted the fix/blob-image-src branch Aug 14, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[next/image] Support blob URL's
3 participants