IMG不顯示編碼為Base64字符串的PNG圖像

Question

我有一個Apache Cordova應用程序，該應用程序接收以Base64字符串編碼的PNG圖像。

我希望此Base64字符串成為IMG標簽的來源。

據我所知，我可以如下定義IMG標簽的來源：

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

因此，當應用程序收到Base64字符串時，標記為：

<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==" />

如果我將此圖像添加到空白HTML頁面，它將正確顯示該圖像，但是在應用程序中，該圖像無法正常工作。

由.NET 4.0中開發的服務器端Web服務使用以下代碼將Image編碼為Base64字符串：

Convert.ToBase64String(image)

其中image是字節數組。

我想念什么嗎？

Answer 1

這是將圖像轉換為base64的工作代碼。 可能是因為您沒有保存圖像格式。

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

如果您知道圖像類型（jpg），則此代碼將圖像'previewImage'轉換為流，然后轉換為base64：

        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

這很可能是應用程序中的內容安全策略（CSP）問題，某些瀏覽器/版本的瀏覽器對此有所不同，不允許顯示base64編碼的圖像。

這是我的CSP標頭（您也可以做一個元標記），它在以前不起作用時允許它為我工作： content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:; content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:;