CODEWITHSUNDEEP
htmlimagesafaribase64
Juneyoung Oh
Juneyoung Oh

Reputation: 7652

Base64 image tag in safari did not showed up

I made a tsp which decode Image to base64 byte array String.

It works in Chrome and Firefox. However in safari 8.0, it does not work.

My jsp looks like below :

String sFileInfo = "";
String name = request.getHeader("file-name");
String ext = name.substring(name.lastIndexOf(".")+1);

InputStream is = request.getInputStream();
byte b[] = IOUtils.toByteArray(is);

String base64DataString = Base64.encodeBase64String(b);

base64DataString = "data:image/" + ext + ";base64," + base64DataString;

if(is != null) {
  is.close();
}

And as result code below will be attached to browser.

<p><span style="font-size:48px"><img alt="" src="data:image/jpeg;base64,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" style="height:90px; width:169px" />1<span style="background-color:#00FFFF">zxczxczc</span></span></p>

I copy this code(part of after base64;) and put link below in safari.

http://base64online.org/decode/

and I got an image, so I assume that Safari also support base64 image.

However, when I put this on web with image tags, it does not work.

Thanks for answer :D

PS browser error message is

Failed to load resource: (kCFErrorDomainCFNetwork error -10.)

Upvotes: 4

Views: 14937

Answers (4)

Mark
Mark

Reputation: 1

Not a fix but I think a more deeper look into this is that safari won't render the base64 at all with the dom loading but will work if you apply it using JS. You can go to inspect and remove your base64 and repost it in the image will load fine.

Upvotes: 0

SylvainB
SylvainB

Reputation: 414

I know this question is pretty old but I've recently faced a similar problem on iOS' safari, and the problem seems to be that Safari will not render base64 images that does not have a number of character divisible by 4.

The solution to this problem is to pad your encoded string at the end using '=' characters. Here is a basic algorithm:

// b64str = 's/3eea4sp...' (or any base 64 encoded string)
while (b64str.length % 4 > 0) {
  b64str += '=';
}

Hope this helps someone !

Upvotes: 9

CodeEngie
CodeEngie

Reputation: 427

I was in a similar situation but the posted solution did not work for me. But I did come up with an alternative solution after some trial and error. Hope this helps out.

// Add an actual base64 string
var encodedImgString = 'data:image/png;base64,iVBORw0KGgoAAA...';

// Create an image, set img source and cross origin attribute
var iosImg = new Image;
iosImg.src = encodedImgString;
iosImg.crossOrigin = 'Anonymous';
    
// Change this to target your element and add it wherever you need it to appear
document.body.appendChild(iosImg);

Upvotes: 8

Nimanshu Parekh
Nimanshu Parekh

Reputation: 13

@SylvainB - I think it needs to be divisible by 3 or 4 to render in Safari @IHan - make sure to exlude 'data:image/png;base64,' part while doing the divisibility test

Upvotes: 0

Related Questions