0

An AJAX request downloads text and jpg thumbnails from a website, which are then displayed in separate cells in a table, all created on the fly with jQuery. This all works fine on Android but the thumbnails do not display in iPhone or iPad (I haven't tested other Apple devices). The text displays correctly on iPhone and iPad. The thumbnails are about 40Kb each. This is not a mobile app. This is my javascript:

var newCell = $('<td>').addClass('photoCell textCell');
$(newRow).append(newCell);
$('<img />').prop({
    'src': "data:image/jpeg;base64;charset=utf-8,"+obj_elem,
    'className': 'buyPhotoThumb'
    }).appendTo(newCell);

How can I get the thumbnails to display on iPhone and iPad?

code-slightly-red
  • 31
  • 5
  • The problem is caused by the incorrect ordering of the elements of the data scheme. I had "data:image/jpeg;base64;charset=utf-8,". Swapping the positions of 'base64' and 'charset=utf-8' solved the problem. The correct statement of the data scheme is: "data:image/jpeg;charset=utf-8;base64,". This isn't stated quite as simply in: https://en.wikipedia.org/wiki/Data_URI_scheme#Syntax but the information is there none the less. – code-slightly-red Dec 03 '19 at 13:03
  • I've just notice that the question, which is asked in a more general way, is already answered by Hemant Metalia in https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – code-slightly-red Dec 03 '19 at 13:18

1 Answers1

0

The problem is caused by the incorrect ordering of the elements of the data scheme. I had "data:image/jpeg;base64;charset=utf-8,". Swapping the positions of 'base64' and 'charset=utf-8' solved the problem. The correct statement of the data scheme is: "data:image/jpeg;charset=utf-8;base64,". This isn't stated quite as simply in: en.wikipedia.org/wiki/Data_URI_scheme#Syntax but the information is there none the less.

code-slightly-red
  • 31
  • 5