Search code examples
safaribase64mobile-safari

Base64 Image Not Showing Up, Breaking In Safari


I am setting the images as base64 strings, and they show perfectly in Google Chrome, but in Safari it shows blue question marks.

Tried different approaches, such as adding this piece of code

var iosImg = new Image;
iosImg.src = encodedImgString;
iosImg.crossOrigin = 'Anonymous';

And adding extra '=' at the end of the base64 string

But it still breaks.

This is how the tag looks like:

<img class="dark" id="image-tab1-107" src="data:image/jpeg; base64,/9j/4RA/RXhpZgAATU0AKgAAAAgA.......QcWHKu/X+mFBf/Z">

Solution

  • So apparently there was a space between ; and base which I inserted there while combining the string, while Chrome could fix it by itself Safari broke the image.