Safari中沒有顯示顯示圖片，但是在IE11中工作正常

Question

背景

我目前有一個測試網頁，需要在Windows和Mac OS環境下都可以使用。 目前，我有一部分代碼可以在IE上運行，但是在Mac上進行測試時無法正常工作。

問題

該代碼旨在動態地動態創建以下div，然后使用從呼叫到服務獲得的base64結果填充img標簽。 問題是它從未在野生動物園中顯示，而是在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();
                }
            });

Answer 1

Safari需要base64字符串，該字符串的字符數可被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">&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圖片標記未顯示

Answer 2

我的解決方案是不同的。 從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圖像字符串。

希望這可以幫助...