Safari浏览器中未显示显示图像,但是在IE11中可以正常显示 [英] Display image is not showing up in safari, however in works fine in IE11
问题描述
背景
我目前有一个测试网页,我需要同时在Windows和Mac OS环境下工作.目前,我有一部分代码可以在IE上运行,但是在Mac上进行测试时无法正常工作.
I currently have a test webpage which I will need to work on both Windows and Mac OS environments. Currently I have a block of code which works on IE however when tested on a Mac it does not work.
问题
此代码旨在动态地动态创建以下div,然后使用从呼叫到服务获得的base64结果填充img标签.问题是它从不显示在 safari 中,但它显示在 IE 上.
This code is meant to dynamically create the following div's dynamically and then populate the img tag with the base64 results that I am getting from a call out to a service. The issue is it never displays in safari, however it displays on IE.
代码
$("#listView").kendoPanelBar({
expandMode: "single",
select: function (e) {
var retrievedContent = dataSource._data;
for (var x = 0; x < retrievedContent.length; x++) {
if (e.item.dataset.uid === retrievedContent[x].uid) {
selectedContent = retrievedContent[x];
$.when(GetImgB64(selectedContent.ServerRelativeUrl)).done(function (imageB64) {
if (imageB64) {
var formattedB64 = "data:image/jpeg;base64," + imageB64;
$(".destroyWaiting").remove();
$(e.item, ".topTabPanel").append('<div class="destroy"> Content : <button type="button" class="insertButton k-primary" id="button1" style="border: 2px none; border-radius: 25px; margin-left: 15px; margin-top: 5px;">Insert</button></div>');
$(e.item).append('<div class="destroy" style="margin-top: 5px; border: 1px solid darkgray;"><p></p><img class="img-responsive" src="' + formattedB64 + '" /></div>');
$(".insertButton").each(function (e) {
$(this).click(function (d) {
insertImages(imageB64);
});
});
}
else {
FeedBackMessage("No Result For Criteria");
}
});
}
}
else {
$(e.item).find(".destroy").remove();
}
},
collapse: function (e) {
$(e.item).find(".destroy").remove();
}
});
推荐答案
Safari要求base64字符串的字符数可被4整除.
Safari requires a base64 string that has a character count divisible by 4.
使用此:
if (imageB64) {
while (imageB64.length % 4 > 0) {
imageB64 += '=';
}
var formattedB64 = "data:image/jpeg;base64," + imageB64;
$(".destroyWaiting").remove();
$(e.item, ".topTabPanel").append('<div class="destroy"> Content : <button type="button" class="insertButton k-primary" id="button1" style="border: 2px none; border-radius: 25px; margin-left: 15px; margin-top: 5px;">Insert</button></div>');
$(e.item).append('<div class="destroy" style="margin-top: 5px; border: 1px solid darkgray;"><p></p><img class="img-responsive" src="' + formattedB64 + '" /></div>');
$(".insertButton").each(function (e) {
$(this).click(function (d) {
insertImages(imageB64);
});
});
}
这篇关于Safari浏览器中未显示显示图像,但是在IE11中可以正常显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!