Есть странная проблема с Rails 4 на Heroku. Когда изображения компилируются, к ним добавляются хэши, но для ссылки на эти файлы из CSS не корректируется правильное имя. Вот что я имею в виду. У меня есть файл с именем logo.png. И все же, когда он появляется на героку, он рассматривается как:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Однако CSS все еще утверждает:

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

Результат: изображение не отображается. Кто-нибудь сталкивался с этим? Как это можно решить?

У звездочек вместе с 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")

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

Пример:

app/assets/images/mypic.png

В рубине:

asset_path('mypic.png')

В .scss:

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

ОБНОВИТЬ:

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

В 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");

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

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

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

Удачи

В css

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

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

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

2.3.1 CSS и ERB

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

.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.

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

Только этот фрагмент не работает для меня:

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

Но переименование stylename.scss в stylename.css.scss помогает мне.

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

Во-первых, убедитесь, что ваш файл CSS имеет расширение .scss, если это файл sass.

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

#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"

ЧТО Я НАШЕЛ ПОСЛЕ ЧАСОВ МУЖЕНИЯ С ЭТИМ:

РАБОТАЕТ :

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 и загрузить оттуда, но наконец-то все заработало.

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

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

Но просто «фон», это делает:

background: url('picture.png');

В некоторых случаях может быть применено следующее

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

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

При использовании 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") })");

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

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

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

config.serve_static_assets = true

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

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

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

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

Тогда вы можете положить:

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

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

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