Javascript背景网址图片未显示在Safari浏览器

时间:2017-03-06 21:46:36

标签: javascript css safari liquid

我试图在Javascript中显示产品图片,如下所示:

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

图像在Chrome和Internet Explorer上显示效果很好,但在Safari上,图像不会显示。

以下是检查代码在Chrome开发工具上的显示方式:

enter image description here

这是Safari Developer控制台上显示的内容:

enter image description here

“url”部分在safari上显示两次,这就是它破坏的原因。有没有办法可以解决这个问题,以免在Safari上出现两次?

1 个答案:

答案 0 :(得分:0)

这是我必须要做的才能让它发挥作用:

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