Java – Converts Android Base64 bitmaps and displays them on HTML Base64 images

I developed a custom Messenger app that sends messages from one client (Android) to another (Web). My problem is that when I send an image file, I encode it as a Base64 string and then send it to another client. When the recipient client is Android, the application successfully decodes the Base64 string into a bitmap image. However, when the recipient client is a web application, the web application cannot decode and display it using:

<img id="img" src="data:image/jpeg; base64,3iVBORw0KGgoAAAANSU...">

My Java encoding/decoding approach

    public static Bitmap base64StringToBitmap(String base64) {
        byte[] bytes = Base64.decode(base64, Base64.URL_SAFE);
        return BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
    }

public static String bitmapToBase64String(Bitmap bmp, Bitmap.CompressFormat format, int quality) {
        ByteArrayOutputStream baos = new ByteArrayOutputStream();  
        bmp.compress(format, quality, baos);
        byte[] bytes = baos.toByteArray();
        return Base64.encodeToString(bytes, Base64.URL_SAFE);
    }

I’ve tried changing the encoding method to Base64.DEFAULT, but I still can’t use data:image/jpeg to display Base64 strings in HTML; base64。 Is there any difference between Android Base64 strings and Base64 strings used to display images in HTML? Please suggest me a solution. Thanks

Edit:

Here is an example of a base64 string generated from my Android app, with padding. I can’t display it on html/web, although it works fine on Android :

 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

I

have a similar issue where I want to convert an Android-generated BASE64 string to binary in Javascript and the atob function keeps giving me errors. My first guess was to use URL_SAFE instead of DEFAULT like you did, but none of them worked, and then I found out that I needed to use the Base64.NO_WRAP method to get it to work.
I tested Base64.NO_WRAP and showed the inline image and it succeeded!!!!

Hopefully this gives you peace of mind, because I did have some before I figured out how to do it.

So, to give a good answer, please: return Base64.encodeToString(bytes, Base64.URL_SAFE); Change to: return Base64.encodeToString(bytes, Base64.NO_WRAP);

E