grunt-inline
grunt-inline copied to clipboard
chyingp
Inlined images are broken in Firefox
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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
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.
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 sorry, it's misoperation. As @vertti mentioned above, the problem was caused by the uncorrect header. I will check it soon :)
