Javascript后台URL图像未显示在Safari浏览器上

Question

Im trying to display a products image in Javascript, like this:

  <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>

The image shows up great on chrome, and Internet Explorer, but on Safari, the image does not show up.

Here is how the inspected code looks on Chrome Dev Tools:

This is what shows up on Safari Developer console:

The "url" part shows up twice on safari, thats why its breaking. Is there a way I can fix that so it does not show up twice on Safari?

Answer 1

This is what I had to do to get it working:

'<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('"','')