2017-03-06 7 views
1

Im Versuch, ein Produktbild in Javascript angezeigt werden, wie folgt aus:Javascript Hintergrund URL Bild zeigt sich nicht auf Safari-Browser

<script> 
     $(document).ready(function(){ 

     var image,caption; 

     function sectionHtml(caption,image){ 
      return '<div class="mason-image" style="background: url('+image+') center center; background-size: cover;"><h3>'+ caption +'</h3></div>'; 
     } 

     caption = $($('.image-bar__item')[0]).text() 
     image = $($('.image-bar__item.image-bar__link')[0]).css('background-image').replace('url("','').replace('")','') 


// More stuff here, not related to image 
}); 
</script> 

Das Bild zeigt sich großes auf Chrom und Internet Explorer, aber auf Safari, die Bild wird nicht angezeigt.

Hier ist, wie der untersuchte Code sieht auf Chrome Dev Werkzeuge:

enter image description here

Dies ist, was auf Safari Developer Console zeigt sich:

enter image description here

"URL" Teil zeigt zweimal auf Safari, deshalb bricht es. Gibt es eine Möglichkeit, das Problem zu beheben, sodass es auf Safari nicht zweimal angezeigt wird?

+0

Dies funktioniert für mich in Safari http://codepen.io/anon/pen/vxXzOy?editors=1010. Können Sie uns bitte eine funktionierende Demo geben? –

+0

Ich kann Ihnen die URL nicht geben, weil dies eine Kundenwebsite ist und ihr Passwort jetzt geschützt ist. Niemand kann neben dem Client und dem Entwickler darauf zugreifen. – David

+0

Ich bitte Sie nicht, uns mit einer Website von Drittanbietern zu verlinken. Ich fordere Sie auf, das Problem in der Post auf SO mit der Mindestmenge an Code zu reproduzieren, um das Problem zu replizieren. * "Fragen, die Debugging-Hilfe suchen (" warum funktioniert dieser Code nicht? "), Müssen das gewünschte Verhalten, ein spezifisches Problem oder einen Fehler und den kürzesten Code enthalten, um es in der Frage selbst zu reproduzieren nützlich für andere Leser. Siehe: So erstellen Sie eine [mcve]. * –

Antwort

0

Dies ist, was ich es zum Laufen zu bringen zu tun hatte:

'<div class="mason-image" style="background: url(' + image + ') center center;"></div>'; 

image = $($('.image-bar__item.image-bar__link')[0]).css('background-image').replace('url','').replace('(','').replace(')','').replace('"','').replace('"','') 
Verwandte Themen