Inlined images are broken in Firefox

[vertti]

All my inlined images, jpg's and png's both, are working great on Chrome but Firefox says "The image cannot be displayed because it contains errors".

Here's an example of image data that you can paste to both browsers URL fields:

data:image/png;base64data:image/jpeg;base64,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

[vertti]

Ah, if you look at the beginning, there's first image/png and then image/jpeg. Chrome tolerates this but Firefox doesn't. Either way, the plugin should not create such a header.

[escopecz]

Hi, I do not get any error. Base64 encoded images are simply not displayed on Firefox. Here is a pen with image generated by grunt-inline:

http://codepen.io/anon/pen/zpdwk

Try to open it in Firefox and Chrome. Any idea what is wrong and how to fix it?

Great tool, by the way!

[escopecz]

Any explanation why is it closed?

[chyingp]

@escopecz sorry, it's misoperation. As @vertti mentioned above, the problem was caused by the uncorrect header. I will check it soon :)