Ответ 1

Звездочки вместе с Sass некоторые полезные помощники, которые вы можете использовать, чтобы выполнить задание. Звездочки будут обрабатывать эти помощники только в том случае, если расширения файлов стилей имеют значение .css.scss или .css.sass.

Помощник по конкретному изображению:

background-image: image-url("logo.png")

Агностический помощник:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

Или если вы хотите вставлять данные изображения в файл css:

background-image: asset-data-url("logo.png")

Ответ 2

Не знаю, почему, но только то, что сработало для меня, было asset_path вместо image_path, хотя мои изображения находятся под активами/изображениями/:

Пример:

app/assets/images/mypic.png

В Ruby:

asset_path('mypic.png')

В .scss:

url(asset-path('mypic.png'))

UPDATE:

Выяснилось, что эти помощники активов взяты из sass-rails gem (который я установил в своем проекте).

Ответ 3

В Rails 4 вы можете легко ссылаться на изображение, находящееся в assets/images/ в ваших файлах .SCSS, как это:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

Когда вы запускаете приложение в режиме разработки (localhost:3000), вы должны увидеть что-то вроде:

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

В режиме производства у ваших активов будут кеш-коды:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

Ответ 4

Хэш обусловлен тем, что конвейер ресурсов и сервер оптимизируют кеширование http://guides.rubyonrails.org/asset_pipeline.html

Попробуйте что-то вроде этого:

 background-image: url(image_path('check.png'));

Гудлак

Ответ 5

В css

background: url("/assets/banner.jpg");

хотя исходный путь -/assets/images/banner.jpg, по договоренности вы должны добавить just/assets/в метод url

Ответ 6

Ни один из ответов не говорит о том, как у меня будет расширение .css.erb, как обращаться с изображениями. Для меня работали как в production, так и разработка:

2.3.1 CSS и ERB

Конвейент автоматически оценивает ERB. Это означает, что если вы добавите расширение erb в ресурс CSS (например, application.css.erb), то в ваших правилах CSS будут доступны такие помощники, как asset_path:

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

Это записывает путь к конкретному активному объекту. В этом примере было бы целесообразно иметь изображение в одном из путей загрузки ресурса, например app/assets/images/image.png, на который можно ссылаться здесь. Если это изображение уже доступно в public/assets как файл с отпечатками пальцев, то этот путь ссылается.

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

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Это вставляет правильно отформатированный URI данных в источник CSS.

Обратите внимание, что закрывающий тег не может быть стиля -% > .

Ответ 7

Только этот сниппет не работает для меня:

background-image: url(image_path('transparent_2x2.png'));

Но переименуйте stylename.scss в stylename.css.scss, помогите мне.

Ответ 8

Ссылаясь на Rails документы, мы видим, что есть несколько способов ссылки на изображения из css. Просто перейдите к разделу 2.3.2.

Сначала убедитесь, что ваш файл css имеет расширение .scss, если это файл sass.

Далее вы можете использовать рубиновый метод, который действительно уродлив:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Или вы можете использовать конкретную форму, которая лучше:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

Наконец, вы можете использовать общий вид:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

Ответ 9

ЧТО Я НАЙДЕСЬ ПОСЛЕ ЧАСОВ ВЗАИМОДЕЙСТВИЯ С ЭТИМ:

РАБОТЫ:

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

Вышеупомянутое выдает что-то вроде: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Обратите внимание на ведущий "/" и в кавычки. Также обратите внимание на расширение scss и помощник image_path в yourstylesheet.css.scss. Изображение находится в каталоге app/assets/images.

Не работает:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

не работает, недопустимое свойство:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

Моим последним прибежищем было положить их в мое публичное ведро s3 и загрузить оттуда, но, наконец, что-то произошло.

Ответ 10

Интересно, если я использую "background-image", это не сработает:

background-image: url('picture.png');

Но только "фон", он делает:

background: url('picture.png');

Ответ 11

В некоторых случаях также может использоваться приложение

logo {background: url (<% = asset_data_uri 'logo.png'% > )}

Источник: http://guides.rubyonrails.org/asset_pipeline.html

Ответ 12

Это должно получить вас там каждый раз.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

Ответ 13

По умолчанию Rails 4 не будет обслуживать ваши активы. Чтобы включить эту функцию, вам нужно перейти в config/application.rb и добавить эту строку:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

Ответ 14

В Rails 4 просто используйте

.hero { background-image: url("picture.jpg"); }

Ответ 15

Это сработало для меня:

background: #4C2516 url('imagename.png') repeat-y 0 0;

Ответ 16

Вы можете добавить расширение css.erb. Ej: style.css.erb

Затем вы можете поставить:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

Ответ 17

При использовании gem 'sass-rails' в Rails 5, bootstrap 4, у меня сработало следующее:

в файле .scss:

    background-image: url(asset_path("black_left_arrow.svg"));

в файле представления (например,.html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");