Фоновые изображения не отображаются в приложении Ruby on Rails

Question

Я пытаюсь сделать изображение на заднем плане div с классом head,

мой application представление написано Haml и тело определяется следующим образом:

%body
    .container
        .head
            .sixteen_columns
            .top-nav

Включено в мой application таблица стилей:

.head {
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

Я попытался несколько вариантов, чтобы указать путь к изображению и изменил имя изображения несколько раз, но безрезультатно.

В чем проблема?

Answer 1

В rails 4 теперь вы можете использовать css и sass helper image-url:

div.logo {background-image: image-url("logo.png");}

Если ваши фоновые изображения не отображаются, подумайте о том, как вы ссылаетесь на них в ваших CSS-файлах.

Answer 2

Рассмотрите возможность использования asset_path помощник при ссылках на изображения в вашей таблице стилей. Документация может быть найдена здесь (см. 2.2.1). В контексте CSS, который вы перечислили, вы бы подняли

.head {
  background-image:url(<%= asset_path 'background_image.jpg'%>); 
  width:100%; 
  height:auto;
}

Примечание: для этого требуется, чтобы ваша таблица стилей была erb.

Это дает ряд преимуществ по сравнению с явным указанием пути, одно из которых заключается в том, что по мере изменения структуры приложения rails в новых выпусках версий вам не нужно будет ничего менять в коде для правильной ссылки на это изображение.

Это может показаться излишним просто ссылаться на изображение, но это одно из многих соглашений Rails, к которым сложно привыкнуть, но это здорово! по мере роста и изменения вашего приложения, мы надеемся, что оно позволит ему лучше выдержать испытание временем.

Answer 3

Решение:

Оказалось, что это сочетание двух вещей. Я использовал этот формат для фонового изображения:

background-image: url(../images/background_image.jpg);

Тем не менее .head div рендеринг с height из 0, Я добавил фиксированную высоту для тестирования, и все это проявилось идеально. Я могу работать с этим отсюда.

Спасибо всем большое за помощь!!

Answer 4

Предполагая, что вы используете Rails 3.1 или более позднюю версию и что вы правильно используете конвейер ресурсов для своих изображений, вы можете включить свой файл изображения, выполнив следующие действия:

.head {
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto;
}

Причина этого в том, как работает конвейер активов. Он компилирует ваши активы во время выполнения и помещает все ваши активы в папку с именем /assets/, Он также игнорирует структурирование подпапок и просто сбрасывает все в корень /assets/ папка, а не /assets/subfolder/,

Answer 5

Попробуйте запустить

rails -v

из консоли, чтобы подтвердить, на какой версии Rails вы находитесь.

Похоже, вы используете приложение rails 2.x, верно? Это должно означать, что вы предоставляете изображения, js и т. Д. Из каталога / public. Одна важная ошибка, которая спровоцировала меня при настройке фоновых изображений в css, заключается в том, что указанные вами пути относятся к каталогу, в котором находится таблица стилей (например, /public/stylesheets), а не к корневому каталогу самого проекта.

Вы пытались изменить путь, чтобы перейти на один каталог от того, где находится таблица стилей?

.head {
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

РЕДАКТИРОВАТЬ: Какие еще пути к изображению bg вы пробовали?

Некоторые другие возможности могут быть:

  background-image: url(images/background_image.jpg); 
  background-image: url('../images/background_image.jpg'); 

Еще одна вещь, которую нужно проверить, - это загрузить представление и изучить div в Google Chrome с помощью инспектора (Ctrl Shift + I). Выберите div и изучите стили, которые ему назначает Chrome.

Кроме того, дважды проверьте, что он все еще называется background_image.jpg Не могу сказать вам, сколько раз я обгорел из-за опечатки, которую я пропустил;)