Question

当我检查Chrome中的元素时，代码是使用正确的网址生成的 - 但在我刷新页面或从Chrome的检查器面板更改样式属性之前，图像不会显示。 Safari中不会出现此错误。

我发现如果删除turbolink，它可以在两种浏览器中使用。作为旁注，我也在使用jquery.turbolinks gem。

<div id='show-hero' style='background: url("<%= @roaster.roaster_image_url %>") no-repeat     center top;'></div>

任何想法都将不胜感激。

Answer 1

使用内联样式在启用Turbolinks的Rails 4中分配background-image时，我遇到了同样的行为。

这很麻烦，但我目前的解决方法是在视图底部为背景图像分配一些js / jquery，并将其绑定到页面加载事件（有关turbolinks和页面加载事件的更多信息：{ {3}}）

以下是您的JS可能的样子：

<script>
  function ready() {
    $("#show-hero").css({
      "background-image":"url(<%= @roaster.roaster_image_url %>)",
      "background-repeat":"no-repeat",
      "background-position":"center top"
    });
  };
  $(document).ready(ready);
  $(document).on('page:load', ready);
</script>

内嵌样式与erb在Safari中有效，但不适用于Chrome

1 个答案: