css - erb 的内联样式适用于 Safari，但不适用于 Chrome

Question

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

我发现如果我删除 turbolinks，它在两种浏览器中都有效。作为旁注，我也在使用 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 时，我遇到了同样的行为。

这很麻烦，但我目前的解决方法是在 View 底部为背景图像分配一些 js/jquery，并将其绑定(bind)到页面加载事件(有关 turbolinks 和页面加载事件的更多信息，请参见此处:https://stackoverflow.com/a/18770589/1769539 )

这是您的 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>