Cannot Display Data-URI images on PhoneGap Android App

Question

Cannot figure this one out!

<img width="16" height="16" src="data:image/jpg;base64,/9j/4AAQSk......pHz7in//2Q==">

This works as to be expected in all browsers. However, when I compile it using the desktop version of PhoneGap (ios) and then use my PhoneGap App on my Android Mobile Phone (Nexus 6P V6.0.1) the image will not show.

This WORKS OK on my Ipad.

I do NOT get the usual "missing image" icon, I just get a empty square.

Any ideas anyone?!

Cheers

Anisole

You can check if there is a Content-Security-Policy problem: github.com/apache/cordova-plugin-whitelist, content-security-policy.com – Ithaman

Cheers beaver, I'll have a look. I've also tried to write to canvas but this won't work and also tried using a datauri via CSS, again it didn't work but it did work with using a regular image file. – Anisole

Answer 1

FIXED! 99% of the credit should go to "beaver" for steering me in the right direction

All I needed to do was to add the following to my index.html header:

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:">

Anisole

Golden! Have been searching for this for ages. – Prestissimo