Anzeigebild zeigt, das nicht in Safari auf, aber in funktioniert gut in IE11

Question

Hintergrund

ich zur Zeit eine Test Webseite, die ich auf Windows- und Mac OS-Umgebungen arbeiten müssen. Zur Zeit habe ich einen Code-Block, der auf IE funktioniert, aber wenn er auf einem Mac getestet wird, funktioniert es nicht.

Problem

Dieser Code dynamisch die folgenden divs gemeint ist, dynamisch zu erstellen und dann den img-Tag mit den base64 Ergebnissen bevölkern, die ich von einem Anruf aus zu einem Dienst bin immer. Das Problem ist, dass es niemals in Safari angezeigt wird, es wird jedoch auf IE angezeigt.

-Code

$("#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 erfordert eine Base64 Zeichenfolge, die eine Zeichenzählung durch 4 teilbar

Nutzung hat dies:

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); 
    }); 
    }); 
} 

Quelle: Base64 image tag in safari did not showed up

Answer 2

Meine Lösung war d wenn. Bilder, die als base64-Zeichenfolge von einem REST-Service zurückgegeben wurden, funktionierten überall außer auf Safari-Desktops oder Mobilgeräten.

Nach einem Tag der Forschung und Experimenten, fand ich, dass das IMG SRC-Attribut muss das Präfix anwenden „Daten: image/jpeg; base64“, wie so:

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

Das heißt, so etwas wie dies gescheitert :

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

Stellt sich heraus, den REST-Dienst angewandt, um den "Daten: image/JPEG; Base64" Präfix. Der REST-Dienst musste überarbeitet werden, um nur die base64-Bildzeichenfolge zurückzugeben.

Hoffe, das hilft ...