显示图像未在 safari 中显示，但在 IE11 中工作正常答案

【问题标题】：Display image is not showing up in safari, however in works fine in IE11显示图像未在 safari 中显示，但在 IE11 中工作正常
【发布时间】：2017-08-13 17:27:30
【问题描述】：

背景

我目前有一个测试网页，我需要在 Windows 和 Mac OS 环境中工作。目前我有一段代码可以在 IE 上运行，但是在 Mac 上测试时它不起作用。

问题

此代码旨在动态创建以下 div，然后使用我从服务调用中获得的 base64 结果填充 img 标记。问题是它从不显示在 safari 中，但它显示在 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">&nbsp;&nbsp;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();
                }
            });

【问题讨论】：

标签： javascript html macos safari

【解决方案1】：

我的解决方案不同。从 REST 服务以 base64 字符串形式返回的图像在除 Safari 桌面或移动设备之外的任何地方都可以使用。

经过一天的研究和实验，我发现IMG SRC属性必须应用前缀“data:image/jpeg;base64”，如下：

document.getElementById("targetImg").src = "data:image/jpeg;base64," + defaultAvatarBase64String;

也就是说，这样的事情失败了：

var imageSrc = "data:image/jpeg;base64," + defaultAvatarBase64String;
document.getElementById("targetImg").src = imageSrc

原来 REST 服务应用了“data:image/jpeg;base64”前缀。必须修改 REST 服务以仅返回 base64 图像字符串。

希望这会有所帮助...

【讨论】：

【解决方案2】：

Safari 需要一个具有可被 4 整除的字符数的 base64 字符串。

使用这个：

if (imageB64) {

  while (imageB64.length % 4 > 0) {
    imageB64 += '=';
  }

  var formattedB64 = "data:image/jpeg;base64," + imageB64;
  $(".destroyWaiting").remove();
  $(e.item, ".topTabPanel").append('<div class="destroy">&nbsp;&nbsp;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);
    });
  });
}

来源：Base64 image tag in safari did not showed up

【讨论】：