Large base64 data URL images error when loaded into an image element
Categories
(Core :: Networking, defect, P2)
Tracking
()
People
(Reporter: adam.recvlohe, Unassigned)
Details
(Whiteboard: [necko-triaged][necko-priority-next])
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0
Steps to reproduce:
I created this jsfiddle to verify my issue: https://jsfiddle.net/adamrecvlohe/w9xa75Ld/
- In JS create an image element
- Set the src of the image element to a large base64 image
- Attempt to load the image
- See that the image does not load but errors
Actual results:
In Safari and Chrome the image is successfully loaded but in Firefox the image does not load but errors instead
Expected results:
Any significantly large base64 image should load when the image's base64 string is added as a src to an image element
Comment 1•1 year ago
|
||
I am attempting to confirm your report, but it seems I can't see a difference between the Chrome, Firefox or Safari. No image is rendered. Is the test page still valid? Is there something else I might be missing?
Thank you.
Reporter | ||
Comment 2•1 year ago
|
||
I've uploaded a large image here: https://send.vis.ee/download/c2cb30729eacd6aa/#CWgOc_1lAJaHqLLkIGN. It's about 38MB.
I have an updated fiddle here: https://jsfiddle.net/adamrecvlohe/0py9xn12/14/
If you try to upload the file, by clicking choose file and choosing the large file, it fails, which you can see in the developer console
In Chrome it works and you see the image
Comment 3•1 year ago
|
||
I can confirm this bug occurs in Nightly v127.0a1 (2024-05-10 and 2024-05-12), Beta v126.0 (RC) and ESR v115.9.1esr on Windows 10 and MacOS11. This issue does not occur in Chrome.
Image used: https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x21600x10800.png
Error displayed:
error show:72:35
error https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:72
onerror https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:123
(Async: EventHandlerNonNull)
previewFile https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:123
(Async: EventListener.handleEvent)
previewFile https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:116
onchange https://fiddle.jshell.net/adamrecvlohe/0py9xn12/14/show/?editor_console=:1
Updated•1 year ago
|
Comment 4•1 year ago
|
||
This is using a FileReader, so moving to DOM: File
Comment 5•1 year ago
|
||
My understanding is that this happens only for very large data URLs, not normal images loaded via network.
Comment 6•1 year ago
|
||
The use of the FileReader is only to produce a data URL. https://searchfox.org/mozilla-central/source/netwerk/protocol/data/nsDataModule.cpp is Core::Networking.
Updated•1 year ago
|
Comment 7•1 year ago
|
||
Moving this to our priority next queue.
Description
•