From 97e749ebee675ef14dcf2d38fead72da9b211c76 Mon Sep 17 00:00:00 2001 From: Stefan Probst Date: Wed, 11 Aug 2021 21:48:57 +0200 Subject: [PATCH 1/4] test: add failing test --- .../image-component/basic/pages/blob.js | 26 ++++++++++++++++++ .../image-component/basic/public/test.jpg | Bin 0 -> 6765 bytes .../image-component/basic/test/index.test.js | 16 +++++++++++ 3 files changed, 42 insertions(+) create mode 100644 test/integration/image-component/basic/pages/blob.js create mode 100644 test/integration/image-component/basic/public/test.jpg diff --git a/test/integration/image-component/basic/pages/blob.js b/test/integration/image-component/basic/pages/blob.js new file mode 100644 index 000000000000..7fd386f30eaa --- /dev/null +++ b/test/integration/image-component/basic/pages/blob.js @@ -0,0 +1,26 @@ +import React, { useEffect, useState } from 'react' +import Image from 'next/image' + +const Page = () => { + const [src, setSrc] = useState() + + useEffect(() => { + fetch('/test.jpg') + .then((res) => { + return res.blob() + }) + .then((blob) => { + const url = URL.createObjectURL(blob) + setSrc(url) + }) + }, []) + + return ( +
+

Blob URL

+ {src ? : null} +
+ ) +} + +export default Page diff --git a/test/integration/image-component/basic/public/test.jpg b/test/integration/image-component/basic/public/test.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d536c882412ed3df0dc162823ca5146bcc033499 GIT binary patch literal 6765 zcmeHK2~-nT7rx0%2m%J#v>-x6R0=4dR1uMV3krk?xD*$JK%#*_5>`=Mq0&}Bt+uvD zP_X#B;ZodCL7{GyilVZ(22r4jfQlku=6@4bJyo#&zvukt{4ZzTd~@G@_ulWmJMT@1 z3gSKt@o;6i0)+zLj($K$VTMaAKLo(j6N~{s5vUY(z!0LKA0+bumt%l2=ng>5q;^Xv zX_;6rCI^WIuwwIs5}}wUj9^Y2Zw^+DEKi)YfSMeSmct>}M|@YA3WxCe6@z|!((1UJ zsHWGkoSYW0Io__U87}ew=@o$y5dta`AS_%W;-chvT=_s}*UxYt%@4saK@{RFZ~CZL5iglJ9o>x(_cg(R&Lkd> z@ZO+6mzf9~B3u>C_xI|;vIvPI2Vqn#RD-A`ehvtux}v&=h+O>;Ms}zoUX*(`-Wt#I zorUB>k^F4xVnl#}sP#PgiUI7#{C#ep7dgmn)Y;L$8nNJc&gFht@xFCc@s1Jg0cmqt}fEzfXdjyEkNC@yj zfFxWr%0&_`dg|60C!Z&VB}mSPX!)2J^=!Fj=ge+hCWInsIMm5?gTP5|CqyAjJa~en zydIlOa6(T}NEZ4YJDsuAci9o*!*FwaBD$vHGw^A+6+Q)+xE*ef+v3hhIt8EFW1EfU zbTcC3sYhNq?L;DvT)Cb<;(i8klt3WrrAR{v;vNfcWhG4~%BXi_m1qG!=t^o+pIq_L z%q2Y<u823gk1xP!{-zGq(@taeZx^PdNESueTfcv4Ap_^9dp0X*#`9G7H>fua{o1%CuK% zUT)rCe#3mbdA9juY$KM3ox+Y|C$P)F#0s%9SOInp%f<40^gmQXJ!=nSU;=kI-y z?+U-i5?TYwU{nG8UXO3pfFFvO4>8E52<4lsw{VCZh^DjsctK>=DTex zxF|R)H~>?@SYe8Sg@Ol(yWeGnv1n`x>RtNAhU%k7<1MCK2{)EJPrykS5hvn@@+8a& z=H`=`4(RCPGFjn4<4u`?0s&J#BxZ`ZVy-Bf8$2G!bCaA0@SGz*4=F>h^vWcj0MnkL zy|1)aHa7}juNYvMWv|Q#?Uh;?0LLZ;MTw$2?V*FZ1V9`zaf1ArqT-15ue${C9PMND z4FGS_38H-mLA=RA_HP3e3W!2bQ>3I((lCkvP}L}y8ignZbktC26nX113=}Gc(-i26 zgOrq!Lf#PcVS-^)9HY_54+_dMG!D2LO?{+=gMx-nAl)ERbHd8>?TVuu51!HDTx~L( zxJa~WkkZg$Uuf%$9y8YHOJmEgCQY`QV(sMY;_Bwk@|fxC=RXV43kv3jg!1@{#geG# znAo`Z)oa!!C4aLnWy8izKWyIe<4;?6WM%LCHD}kqb{{(YTi%hQ$Bv&kTU7k}x$_q; zUbO`#DHujmL~FM+12dijYT$2Pa}{K%HY9+ zwKTL0H8c$Ut+(i(pN7A@59n^qn*XrrO3}Hh%Dh`U-_$%1FkgB#v}Tkp zEv0AktJ@K6Wdx zR#mAJJ#IVcZ<1j)^`X$2o>BZlucgJ*!cC~|pw!^Z-kp_+t*}$7wxLO-JL;9i)&ykF zThWkyDYq%N#g+h%Mjq@)F`{bkSRcD>(54CQJ7?>y(NoOboZz`*dgkJ16;`(MW1P>o zrfpM|mbRy~9Xh73ADh^|#C`Il$FlUr%DH>S+j3=DcURbokQvg{KrW2SF*iIX-y@eC-T5|DK##QDKmLB}7hQF`Z&#kXbsuA>_-OC6Vv zUDmfTd>Q%6@@0b)@=Q5SCQe4ibsh(%Iq0g{s|=XnK)1j>RpA+tyYCg{%>C}-M4H~+ z>~_k2v2S3GNWAaVqT7-iv$tWU*U=lly?)W2zUe2A zjG&6th`3DEbl#q-%^8t9@0H}-QDG@-*~-=|RlBg;av*Ogg&5!_{K_n8x!$CkCHwD~ zHI5w~NIw)KES9ald-7Jr5E^V0fNABGH^Ff_GH7BHFQ0=Yy`NJ11D$x`dH_h0-!Ns`n1+&Q| z;c#`B`aEpb<}+uWJwGwVu6RvTA|v@WTY;wOW8dGUPYmP)*#Dq#xt{FSO}t$B=OqE| zvhVJlEm&96t^_SYN^C6egyZc$3+jh0oEj|J(_!+)yWm=WRc~!}*Qosdo|i2DFC*-M zhsm+#+T?eW{MLuD^E=BlL_59V zzkX=D-~P&d>sgxyC~U+E7E<5yW3oW78&*t$hZz@d5jj|(#0A{;N#`S6$ks{XFp zeGoUVpY_rw`Z?YH>CvEKXso$(TXu#hZlBJ3)~$Q5Ih^Ndeb2A#QQ3Z14%gT_Kra)$ zXJ{5yGj6)~v1^Tw%AO_}u1(2Ebe#50ji1gdvvsHS+C2|FzPV@13VaizzOsNC_p)tP zQYpnnll{Jn-rt${czg4`lzr9iBlD}$cllARn$UZcAMm{KQ(_PTv8M%o~4<$gE{yPEB+X+akCZL)}z}nRaynaK#g~-I_ug>|{kI3jS z)gMN{l}4G$w4nG?+ygV@d`kpUSY=*>+dRji}!=Evf|9{ { ) }) }) + describe('Blob URL Tests', () => { + beforeAll(async () => { + browser = await webdriver(appPort, '/blob') + }) + afterAll(async () => { + browser = null + }) + it('should render image with blob src', async () => { + expect( + await browser.elementById('blob-image').getAttribute('src') + ).toMatch(/^blob:/) + expect( + await browser.elementById('blob-image').getAttribute('srcset') + ).toBeFalsy() + }) + }) }) From b9a6e6f23a05b8a305e78b7af7a27ae38f852938 Mon Sep 17 00:00:00 2001 From: Stefan Probst Date: Wed, 11 Aug 2021 21:49:50 +0200 Subject: [PATCH 2/4] feat: support blob urls in image component --- packages/next/client/image.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index d8f3a21ae8af..0171ddc0b705 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -348,6 +348,10 @@ export default function Image({ unoptimized = true isLazy = false } + if (src.startsWith('blob:')) { + unoptimized = true + isLazy = false + } if (typeof window !== 'undefined' && loadedImageURLs.has(src)) { isLazy = false } From 66b6430f5de5c0b73c716c4db9eb5804a4fe1f70 Mon Sep 17 00:00:00 2001 From: Stefan Probst Date: Fri, 13 Aug 2021 10:28:18 +0200 Subject: [PATCH 3/4] refactor: move if statement --- packages/next/client/image.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 0171ddc0b705..9608f3981ac0 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -343,15 +343,11 @@ export default function Image({ let 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 } - if (src.startsWith('blob:')) { - unoptimized = true - isLazy = false - } if (typeof window !== 'undefined' && loadedImageURLs.has(src)) { isLazy = false } From 8848ea73770f800d887db86a30d7a263703d8f37 Mon Sep 17 00:00:00 2001 From: Stefan Probst Date: Fri, 13 Aug 2021 10:29:30 +0200 Subject: [PATCH 4/4] test: reuse test image, move to default tests folder --- .../image-component/basic/public/test.jpg | Bin 6765 -> 0 bytes .../image-component/basic/test/index.test.js | 16 -------------- .../{basic => default}/pages/blob.js | 0 .../default/test/index.test.js | 20 ++++++++++++++++++ 4 files changed, 20 insertions(+), 16 deletions(-) delete mode 100644 test/integration/image-component/basic/public/test.jpg rename test/integration/image-component/{basic => default}/pages/blob.js (100%) diff --git a/test/integration/image-component/basic/public/test.jpg b/test/integration/image-component/basic/public/test.jpg deleted file mode 100644 index d536c882412ed3df0dc162823ca5146bcc033499..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6765 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 { ) }) }) - describe('Blob URL Tests', () => { - beforeAll(async () => { - browser = await webdriver(appPort, '/blob') - }) - afterAll(async () => { - browser = null - }) - it('should render image with blob src', async () => { - expect( - await browser.elementById('blob-image').getAttribute('src') - ).toMatch(/^blob:/) - expect( - await browser.elementById('blob-image').getAttribute('srcset') - ).toBeFalsy() - }) - }) }) diff --git a/test/integration/image-component/basic/pages/blob.js b/test/integration/image-component/default/pages/blob.js similarity index 100% rename from test/integration/image-component/basic/pages/blob.js rename to test/integration/image-component/default/pages/blob.js diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js index f2fbccb41328..aff13d076e6f 100644 --- a/test/integration/image-component/default/test/index.test.js +++ b/test/integration/image-component/default/test/index.test.js @@ -229,6 +229,26 @@ function runTests(mode) { } }) + it('should work with image with blob src', async () => { + let browser + try { + browser = await webdriver(appPort, '/blob') + + await check( + () => browser.eval(`document.getElementById("blob-image").src`), + /^blob:/ + ) + await check( + () => browser.eval(`document.getElementById("blob-image").srcset`), + '' + ) + } finally { + if (browser) { + await browser.close() + } + } + }) + it('should work when using flexbox', async () => { let browser try {