diegomura / diegomura/react-pdf
Image stops rendering. Both with web browser and node
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
We are trying to render a QR code with react-pdf and it seems to stops rendering after a few lines. We tried both with the QR as svg and as png.
We are using the `` component.
The same issue happens with browser mode and node.
**To Reproduce**
[react pdf REPL snippet](https://react-pdf.org/repl?code=3187b0760ce02e00409605b02181cc0a60112549302f005030c0390026d9201722a9a03d000e60a03700464846806c00b001a3800d40108079004a01dc003006900e2284004175aa01c806500aa002c028ae941bf404d0d012403aaa808a016436a801e2293d97a200da8c7c2c6ea56000af4e1009c489ae6e6562eaa6092da002a3e2128f4d2001a006eb2c200d61a5000667a92a2c2001270c000ecc2008cec0056008e107c860032bad50052183c29d536f68c005a08c092e27ce23e93aaa50303ae3d56c0aef5f620f429c0b9d250da006267ba004eb2001c203e3cdae2188c113c60009eb9f4ba3f00ac937a2147ce157239cc284921921d0f300198f86849001a8c821568fc9067787c2004cec5d3b572215b981b20061790f06c0366bfc2268040d96e2881bc2ae50339f052f0dca6842181f2b9aae61eab95a9a0c060d0002f7aa49b600575d27d34637315cf1601f26972ba460f8d0cd26bfc95b2460f524686d0f020f0d97b1c4b23c7c944ba5bb54c8d52b9c11cd252821aad22b1214a4ad4a2926b7573c242fcc9ab9b4c24d045fed4f10a524b27d354d0502834944681b0a7d8577d158b2031f355ec28c2885b286493e8b2560a799653d1f2e4c0fa4721944b2dcb0842e65ca140668109c1cc103c62878115121bea6708bc3d8676aa4c78b256a39347c570a3e4287e708223d5b9f1243e1039944d20a5347a8c768f584286c8844085611847314a529d81011c574421f1186a9744315c4c914460d02b1f4691fe149ec0810a08180731aa451a44318449126529721e1b2081d843118691cc3e10a1b11814481428290a495568a0591456a95c7d0ae6a8292b9ea1001004126569b47b1876916f01829690f9731142b9985c829381244a3541f1ec240a97850a594f82553e26c5b4c514471da041641e95a569267a8f84d0d04d1145d1b22b1b7590c0450c87c318591266115c5c9f67f9da101f41e1ea790f4d3230100293e1e15b9cc3829a1b1b41f1243816510c061b1da145c4731da24114528a07690c790574f850944a05ca0aa1daf59078528c84f82232050280304d50c1409a13c903c4677f9645714a145740a53e268ac4287a7f9ec711c4471e828124761cc040b3240257a9da6c9d85b806793547f8fc498a32813e3813e7907a6d0b2690ce761fe2b0c05115c711545682923164451542d8295d0191490a340952b16551051730c80c0c8352a06a9725621559134148f1681543c53e430ae141ea3c5a46d142b01ea4d1b21490ef116e4f914269651444208926089e8018ce45114b389a75b5c280d6f0c306c964428514316e088f8460ae510501407a7930a1e0f1711f4428f1240422954a38011e0410568ac6c9c2269804310a49cf1320206baf13e1ec6c9f479184405d98a56e7f9d8790c0381740edf1551d99b10c3c5da0a7e11496e1095456358fb11e901937a1cc711fa01840281f47b14af1638fb17428f1c1e964240905e3b2730060815a5d1145c9aa1e810490502b1d6321da791f4141c46d5e10194476180018f17f914101e15107a595652b16e470b62b0d07f86c5c9f4461db6007c6799b41b7245042593fe54dbdf11f96c9342b9e40a5d81435081918380c855124602d9d1819c148b29743480407c16e0564f8b05e0ab40808a0c036e240e21e8122100ec0f11764706417231a570d9db20f40c0b70478a07d07655430828c483213c2240360e03880be1786c8a0300b835a3647f8bf9d8134190b318fa481b6f40403f253e361aa388784b613e00c7f86003f2d61dcec19874859c6717cbe93c4d5de42b4760601e40a2600480ac1f64d06415a354040710ae040108c20f82c84900307d97c1409f15427400c640e0044528fa03019c0c0f2189b007f8a216e00f268a206c1401085611c0d8268ae10a398610180523bd6d0600401489e09312615629603079a38428601cc0f8690ed02227e1f0e60ddae858ad215aa91428fa1342181f0143eaa14356ae1da1401f6d20a61792808e02239d6a8d50520403b0181527085283d1060a06fe764ce3fc3c4291030a27f8da18021c3c4031cab4c10e931a43d075c3c05126b4f266c5108f7a0ad0f13e87f8ba01f1b26d0b9030180310f51a63b4428b717a19c470571802dc7a0414c81f0080f511c12a018364f81807103cdfe1c0510100300847f88d9b22dc6d0850c8364710c213e38524099372388254f41f4222ab0092952303c1b522910cafc46d1c1c04d0ed0423b4300f61723fc018d51442b41e0e61e2ae43e0ca5868202b0931819201e0861723b07485615c19c280d90950801e8a20ac3b47604a8423885aa4b14a0604b54a9e400c470030100de7a83e0c00d81b0f41843c2568c294508459430c279a0430c69650f06d5e60e609e340931b22ca088e61a16302800f07827c7a072d182184984b29a28a71446d0c214c50680221805d0b54400440c09a1680807b0ccb183c81008c0523334a6f21180f0155ae010382144364aa55c570e60257fb730f6154860088ae1dc1401e88c5157d43ccec199308342ba12422f148e214e884428e2042154fd0fa09515c7e0ae16e36433511165020528a209518e1b09e00d0a230e3e1df5a06c8931e43004d5211641585ea211e686062e4804c680250b70103e6ea81111c3fc710da0292186d12811c0403a6f08c8230240f08759f47a06705006043c2fb6401a4703246c3610a48a1242976c857154134610ec008e29428e69fe2016d04a9147fc600ed0586184be8a02a9581f0f507666809e149ea440613c2db424c16d1009a052108101742ca49803022136c56281262c81b0641c10a07308c11c1a01e81013e289ae61017d044254998f63c81f09d16506185cb88521901b0c424224c5152893d4a27a09ad4419c6c858606032b38a91e12284d04a89a3e4adec3aaa3481422913e1906d4f407c020c2829144280be0d91ec1e23c4c20ae0f4674c12950db498fe09005d080ac66c192ab02896e08251b8e171a284285010a3d8324e6bf41802b80d55a3627b04a92368e528506300f42b8d90161407e4600ac370954920ce00c5f9735e83fc14a6955c1e211a138690270b5211800527f8ab3da1663c4145da2b80806718c05d5d09a09a1347bb079b23c25f9d91a41d5b800aa2012a498849fe0a0628200e0e144985f7d8304c5a6f13e0455d02d15c0a44989a10a2e83de851b423814805a7c0f4088570f7bc83a9288903d41b0628ae158268b20513ee75a05b34080268b718e154a805a1720f823bd20783895b83c09cd84590b211c32c1721d69015c3e0510c8368768bf7ea34801afa0f1144c9078b95c4e7f83c0628193007c11c3ae340778927c8080325867d8768b29fa8f05d05011e0f4140ff0c82483c4c1dcc0a46a1cd55419072ca20652a823a3887a3d4300480062187103d1c9074528f21d51586d08080624c8406714a2ca0809a050020100eca202184302fac0052340f080a169d1c5aaf80a032002d4a1f00c02887a27c60000ca01156fc7c0f112a7a88a1cc33d3c78c06c054fd5f08920e2fa8d901b365bc4e6a189e9b13fe8966b8184f50108f40a4481fe365fa08a06c0d5425d53f429a9e057035f5507af4286a84607d047e2402f908911a3e02b03cc4f845e4f859e3354600c06101b07f84305941641b023e5900b700a5102b81b00c01f51a43381004f861b4841e04934905287a06794905683805683f572776818a7ca6902531007f81e86003c45506ff2c34d06907102b06900182406c80883801e02402cc6c87a80804905506fa2b00886c82687305681871483e01087d0235490520c4c7600125284f86c83207b01e82806003383405907a02403fe0885983934ca4d00906d00c07d016949004510846017a3e02687687a06562b85fb1005943285905c82406314a54305683082401561591b068c2b09b01ec4984706c847015b3b41ee0183803382545706c879007f59453c0de7b09483935907605940361f02bd7603206c31e649860b69079a0fc4285700c005f4986a877a300288b4d5b83154605744ed0405b81b07847a85500094045681557b72e630a59432054d368cdf7b57fa5377a879c78c2a92c32542ba30030055d3ec2b01e02bc3061f07601446107b026840c61030f7647d73385100182b84f80a46a830078469025423e1e017c3403384f84f81483297ca3b37143b0e906f81bc2804aa3ba2484907bc5b81b55944286005943384285d71b03403003386a97a04d00407606c96503e01f02d431e36a6902400c02546a850f3e038010759477a1487f80805c63fa14067b4f43384d5078704f167687847907321e8480c30033430144564b581b02f0ed04907900402b84507d06d044895a7a037c5973386ce6a85686341b01b56900807852543201442192614d00a467925433e1440881b02b84d0268ff80402684604310b266c56c2be1e8230cf84284f85363207f84605680187d11b4c507b07582b03546c82404703e07d65b82cc0a449842a5c85082542803405c8140254521230b401440c03e06d06404cc7027687307df73a4300094aa7f81440404f81e060b7509005d04acc900887107b05cd7a06005d00401407606455704601401f02406ec0254bd0c05314285283c41b04f81f03fa7f84f85683e05d04dcbb728906251048d7403205f877670cbc72b86901223e03e053257cf657601e87906cc9b41080600a46493dc86b26b3e07303e76006dc49046481876032662675e4617a86c8e2cf2e0186003405d03803803002e26bcee06043800c06f73007a31cf574d9443b2407b27786104605c849003cdc2bde2db5940c066176001c4f8324ec85d05934701005d96c81e05917685b818540c444b4861036a15b14451b358dd05905e11e84a4cd0a581e0731778e6757d2806106743772b07a810856a2401005209b052857021808812539879f00f44a4732540a8ab80a43d500d45061000504038073c617214cd01f07846105b853e0880505681d63203005504e294aa4263149035e5737a843060051b3403402680800804700407b0380680fd059ca560510a41480c004e0a47a01557e009c0515c82805d02544e2f2d4305901084703385c81b00503004f96d07847d01573385ac57c8893bcf4b5b26620c02e37452401e8679170b40760b525c86889fe4d0270c9c4981f03380170a96106d37844984a285a49849f55059058f52819c5617a03ae7b0312ea824056cb387d05283990336eb3800181085284606006901405b8594610880250a6d61b3be6ec2e8264a8ce0727260b2b86bb152b383806a87f80017a87fa682b005684134d001851a90a1483648404d54c6ee44d0470470108086a682906d002c10816c0e74304e154c9111e05bc3c514861714d4c56a852871b2703007a05e07900755703c8f6076061a4500852df5c84f83c44307602fb3226aaf9969002b33b4095b809a05439530e61034025322f70b2685c8268c3014861ab345757a0710678b020935107b7458e1a5b235833853279064f63573025416e4ac1f072b7902802540807ef5683005946a093b6ab38a3e043c1081e075026e26838310074a45065a7307a86273405684904d060023928014459062c0d315cd10280300570444bf46c80421e019b0403003586bd6254906ff2b86aa61511a9b07a82242807a87a82547f027f51ea9b25cea8622d90500066b005182b345008071776d241352f5e3403202684985b0cf858aae84a20a43004284f9756cd6d416d8ec0ab8050d048884607b2a4e26479047005ec7121d26821408b4f423ee6a7ee38b613340470036b226d05504f868d4f81fafd13e0270a683e67d055052518b1e83da338184c8f1402fcc9846182d1405285507602ee34c76e504fa70ac0800481e91012672547b00400e212002002053ee801807b04907c01800000a0004a7c00003e651a201800001e14a6006eb064a80751ed1e201d19083a018008042a3403c0000223ba3b1ab1e7a2343c00006f6803bcb400800003a3023ea0005f131e20109dd1e10380340690671af1f71cf1a345f1dc8089e90209d31d09dd1948340296689d718f1971ef19f1a8038028f340209c29e299d18384c9e31a91b499099d1ab06407402b1a85771da07402c01c00099807a0609b498a9f09c89de9b31fa00b1f405e98a9fd1c31b006a9951d60291aa0e999f1ae71403806803402b8251b71ed1d286e2b800ceaa05207100232401f03201200106d1af36000399207d002c4600802a07085287002805f19406806c03a81f1d000407a0080311639d39fa05c82687847ce0007d6c9610757758f11424320784040085f90a40750029b28491809d99a91991d80389ef1c51916af1ed07d02aaa801f9ae76c03404d9ed1ff1cf8039ad9d099233203f11601484ed039f847f80b9e658f0b65c6192e4cd0400399e01e5d49965815ea8772c2a579939ae5f15e20009de5980329a34465d49979e99ed01b1839af6155e2016ca963d23800e11b98a2e99f59f39cd5d79b385d9fd9c39a05b39ed1e55ed1a4066cfd07728d5d09ad5d385d59802683c4035d55aa9935b35d200b596cab86b5d09e402a61a2d10215f12039e71155d75e20747036a29f55980265909df59d5d94340039d9760db8d959b0012da0d9b5e99bb5d8a875920239fe4d39c91a55955a35a806f5909f2d9a2aade0d82dff589a60d8edb0dcadd205681cec299b098dfcddb5fb5865d201484406f18005a49071224030056d98074df80469e2ddcdd499ed805759c29d311f012dc55eede370ade95df442ee99f9580ddd734d955b258f0f59aede2001da2dbeda3d9bd84da4d9159803c459061dd0d9f0535b1d92048dab5e0dd0007c2b81b99402e74f819dddd9237405cb364cfdc3de659006b1c29f001b9a403e307866cb4019defdd79c2d83dc0de0db0202c64d98021f60da345aa039b03d49df40a14ed9802e3d0991dc83f0d983a31b83d49843af5d20143b40343d7d8206c5b99800480206b4240600049609259864b20759a519d1f91ee9f519c5a00000)
Note that there is no problem with the base64 data, as you can see here: https://codesandbox.io/s/blissful-ganguly-7bgfnp?file=/index.html
**Expected behavior**
It should show the whole QR code instead.
**Screenshots**

**Desktop:**
- OS: [Linux]
- Browser [Firefox, Chrome]
- React-pdf version:
"@react-pdf/font" "^2.3.0"
"@react-pdf/layout" "^3.2.0"
"@react-pdf/pdfkit" "^3.0.0"
"@react-pdf/primitives" "^3.0.0"
"@react-pdf/render" "^3.2.1"
"@react-pdf/types" "^2.1.0"
Contributor guide
Assessment
This issue has not been assessed yet.