IMG not showing a PNG image encoded as a Base64 string

Question

I have an Apache Cordova application that receives a PNG image encoded in a Base64 string.

I want this Base64 string to be the source of an IMG tag.

As far as I know, I can define the source of an IMG tag as follows:

<img style="display:block;" src="data:image/png;base64,BASE64_ENCODED_IMAGE”/>

So when the app receives the Base64 string the tag is:

<img style="display:block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAUnSURBVFhHvZZtTFNnFMfZNNHFLPtgln2YyZYtm/PDtixzODccAVRgQgGlVmZFZdYWRNApOEHX6TppCKy86CAtKNQWSFVggEWwiFjeKQUpfQERDCAMnY7Ji962t//dtlcz/bTQ2l9ycu9znpfzv88597nXyxXSi3OOJ+QcmS9Xlr9PuzzHxZqa99QajTb3fMGsF/AK7fYc5XXK+qnpR9AaTaioUobSbs/Q2Ni4OPF08v3WW+1QNFVAIi/+lu7yDNnZ2UtyLxVO1xuuQVAstHYYOpbTXZ4hNjl5lbr3JtnRr0de8flU2u055JVVBQOTk9AM3kK+tDSWdnsGe/6V6ua/DRMT6B4aQka+xCHgkli84qpC8YZj0MtEKpUuk1ZWzxvvTqBNb0DS8RO+dr+CG3WtbPeWQccgd7OJm+LNOHLmysqvGK/b276+votT0zJijwjS9tjbyXy+t1KptIlzc/QAXrX73EpEoiCafaIQZdW1t2UVVUV8/rmldJeDhqtXuwbvjqO1rw9pItE3tNu91DU1NQ5QQYpUWoQeEsmoJ11Ed3mpj3JtUxfF0OX8jPyTJz+m3e5FUlYurO4axG9VXTha3ABO4qE1dJdXfb7o4bhUhLZU3kxm5sHXaLd7YTKZiwITMmXnVD1oN91CQ0cnkSs+x/s1K+uta51ac5txAOX1Kjk9/OWgUCgW/SLK/WF46h50o2No0/UjM1/SOUS1tcPDqKhXVVLFuIRKj3s/TiMjI0tZLNY679WrU/aG+fxRXVkK+0HUPzYGZUs7BiYmqTPhNn7PPYUfd/mDF/7ZIG97oDGGw9tGL7FwOJz9fhmp8TMFhxmoSQlAbbI3Lhz2QUuHGrU3VBDLxGjV9aHDNACxMA6VGTvQW3EK92uOgRMZlE4vs3BYkeGJk+pjeKxNw0zv75juLMB4axE0qjKoayW4XiNETUUWqivP4nbLRczUnsBccTBmSzZhT0SAgF5m4bz59ruf9lxmw2bkAJTZ9BwQ3TGYb96JeXUc5tr5mOvNw1xzCmaLNsAsDwBB2cOSMKxasSSGXmbhCEWSVcrCcNhMTgFPzWbYDVLDgK0rBKRpP8junY7AhHy94/qXLAJrP1npugA7BRkhtqc78NTIni2O4A4Bxn1UexeIEn9aRADGCkMRs43pHgGleXssdgF2s9xJh3nqAiw6KqjGKcBmiAPZG/NMgD0N+tOBiGaxNtJLuEZ22pZmkkoBaeTC8o8axH0VrI80sHRHOgXouSBvfo8ncrsAZwraMvyx/J0PP6KXcI0sAbuONHFhnjgL4q6UKsLvYP5TAXMX05kCqjDJPg4twJmC6wJfbI6Kd4+AHVu/zLKa4mCZbsKT4UyQXaEg9AdgeVBH3TNg7Y8BqduLJ/+pgepUH8jlVe4REBLkwzcPxsM8kg6beRTEkBDEpALkYyPM3VGUgF0g+7nPCSg68IV5dHTUPR+mz72/5s72UfnvCoNFnwhCl0A9fQOIUQlViKHU9keDNPCeE5Adu4agp7vO9u3RG/WX6YKz59xxpQJT5vDdZMNqiKUEOIPbLe9g0Aw93XV4PN7KK/lBzwS8aGRvlOMsIEqdOzBeGIwdjHVCerrr2P9+krh+2ns3NsOiiXC8/85doAX0bKUExIMoC4CBev85TD8Zn893778hm81eFrjBn5u8L1iW/VPQZG3eetuDFhYlJgxWLRNWUwJuZG60MfxWJ72UH9MX4XKTPggJWht3LCGs5Iwg/M6p41vVkZuDWXT3/8TL619uw7B/qo1h2QAAAABJRU5ErkJggg==" />

If I add this Image to a blank HTML page it shows the image correctly, but in the app the image is not working.

The Image is encoded in a Base64 string by a server side Webservice developed in .NET 4.0 using the following code:

Convert.ToBase64String(image)

Where image is a byte array.

Am I missing something?

Answer 1

This is the working code to convert an image to base64. Might be you are not saving the format of an image.

public string ImageToBase64(Image image, System.Drawing.Imaging.ImageFormat format)
{
    using (MemoryStream ms = new MemoryStream())
    {
    // Convert Image to byte[]
    image.Save(ms, format);
    byte[] imageBytes = ms.ToArray();

    // Convert byte[] to Base64 String
    string base64String = Convert.ToBase64String(imageBytes);
    return base64String;
    }
}

Answer 2

This code converts an image 'previewImage' to a stream before converting to base64 if you know the image type (jpg):

        var imageStream = new MemoryStream();
        previewImage.Save(imageStream, ImageFormat.Jpeg);
        var base64ImageString = "data:image/jpg;base64,"
            + Convert.ToBase64String(imageStream.ToArray(), 0, imageStream.ToArray().Length);

Answer 3

This could well be a Content Security Policy (CSP) issue in your app, which some browsers / versions of browser respect differently, not allowing the base64 encoded image to be displayed.

This is my CSP header (you can do a meta-tag too) that allows it to work for me, when it didn't work before: content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:;