Menu
I have base64 converted image and put on container background like this:
background: url('data:image/png;base64,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');
Chrome and other browsers open it without any problem, except Mozilla Firefox. It show me blank image and when I try to open image manually, it gives me error:
The image: "data:image/png;base64,iV...5CIIA=" cannot be displayed because it contains errors
Any ideas why this happens and how to fix?
Here is the fiddle to try: http://jsfiddle.net/zur4ik/QUXV5/
663
Clear cookies and cache Sometimes problems loading websites can be fixed by clearing the cookies and cache. to open the menu panel. In the Time Range to clear: drop-down, select Everything. Below the drop-down menu, select both Cookies and Cache.
Browsers can cache downloaded files. If the Base64 string is in a text (or JSON) file then it can be cached. This data can then be used directly in the HTML (or if JSON, parsed with Javascript and used with HTML).
Click on the "Exceptions" button next to the "Load images automatically" line. In the window that appears, click on any website that has its status listed as "Block," and click "Remove Site" to allow images to load when you visit that website. To remove all exceptions at once, click on the "Remove All Sites" button.
You can inspect and manage permissions for all domains on the about:permissions page. Select the first image link and use the cursor Down key to scroll through the list. If an image in the list is grayed and "Block Images from..." has a checkmark then remove this checkmark to unblock images from this domain.
Looks like there's something wrong with the actual base64 data. See similar working example based on a image/png;base64 file.
Try using these tools to encode and decode your files.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
