HTML и CSS фоновое изображение

#html #css #ruby-on-rails #image #background

#HTML #css #ruby-on-rails #изображение #фон

Вопрос:

в моем приложении rails я меняю HTML-часть страницы (localhost: 3000 / feeds), в файле index.html.erb я устанавливаю фон таким образом

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>

    <head>

      <style type="text/css">
          body
          {
            background-image:url("../../assets/images/wwi.jpg");
          }
        </style>

    </head>
</html>

каталог настроен таким образом:

 ->app
 ->assets
  ->images
    ->wwi.jpg
 ->views
  ->feeds
   ->index.html.erb

но когда я запускаю сервер rails и перехожу к localist: 3000 / feeds, фона нет (у меня не было проблем с цветом фона)

Ответ №1:

Вы не используете конвейер ресурсов rails, записывая свой css внутри views. Если вы посмотрите на документы, там написано

Asset pipeline concatenate assets, which can reduce the number of requests that a browser makes to render a web page. Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for your application

* Итак, вы должны использовать его, и для этого в первую очередь удалите все стили из своего макета или представлений, и вам нужно включить rails application.css в свой файл макета с помощью

 <%= stylesheet_link_tag "application", media: "all" %>

Этот тег заставит пользователей rails искать ваши стили внутри ресурсов / таблиц стилей / application.css. Теперь вам нужно запросить только что созданный файл style.css.erb для включения ваших стилей с помощью

 *= require style

Теперь внутри вашего style.css.erb вы можете создать свой стиль следующим образом:

 body{
  background-image: url(<%= asset_path 'wwi.png' %>)
}

Обновить:

Если вы хотите использовать sass вместо этого, тогда ваш файл будет style.css.scss и может использовать rails image-url helper, так что вы можете сделать:

 body{
  background-image: image-url('wwi.png');
}

Для получения более подробной информации обратитесь к rails asset pipeline

Ответ №2:

При использовании конвейера ресурсов путь должен быть относительно корневого

background-image:url("/assets/wwi.jpg");

предполагается, что изображения.

Также вы можете использовать помощник по ресурсам

<%= asset_path 'wwi.png' %>

Я рекомендую вам ознакомиться с документацией конвейера ресурсов

http://guides.rubyonrails.org/asset_pipeline.html

1. Первый пример не будет работать в рабочем режиме (с добавлением отпечатков md5 к именам файлов). Следует рекомендовать использовать asset_path .

2. и где и как мне использовать <%= asset_path ‘wwi.png’ %>