встроенный стиль с erb работает в Safari, но не в Chrome

Когда я проверяю элемент в Chrome, код генерируется с правильным URL-адресом, но изображение не отображается, пока я не обновлю страницу или не изменю атрибут стиля на панели инспектора Chrome. Эта ошибка не возникает в Safari.

Я обнаружил, что если я удаляю турбоссылки, это работает в обоих браузерах. В качестве примечания, я также использую гем jquery.turbolinks.

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

Любая идея будет принята с благодарностью.


ruby-on-rails css turbolinks erb
person Jason Pearson    schedule 28.02.2014    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Я столкнулся с таким же поведением при использовании встроенных стилей для назначения background-image в Rails 4 с включенными Turbolinks.

Это хакерский, но мой текущий обходной путь — назначить фоновое изображение с небольшим количеством js/jquery в нижней части представления и привязать его к событию загрузки страницы (дополнительная информация о турбоссылках и событиях загрузки страницы здесь: 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>
person wrydere    schedule 04.03.2014
comment
это заставляет задуматься, стоит ли использовать турболинки!! :) - person Jason Pearson; 07.03.2014