Існує дивна проблема з Rails 4 на Heroku. Коли компілюються зображення, до них додаються хеші, але посилання на ці файли з CSS не коригуються відповідною назвою. Ось що я маю на увазі. У мене є файл під назвою logo.png. Але коли він відображається на heroku, він розглядається як:

/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, за умовою ви повинні додати просто / активи / у методі 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.

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

#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. Зображення знаходиться в каталозі програми / активів / зображень .

Не працює:

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');

У деяких випадках також можуть бути застосовані наступні

логотип {фон: url (<% = asset_data_uri 'logo.png'%>)}

Джерело: http://guides.rubyonrails.org/asset_pipeline.html

Коли я використовував дорогоцінний камінь «sass-rails», у Rails 5, завантажувальному пристрої 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;